[Feature Request] easy way to disable "active" for buttons and v-list-items etc

Problem to solve

I can see how the “active” router-link works for some sites, but it isn’t universal and when it doesn’t apply, it is a pita to disable. I would like to request an easy way to disable the active route tracking on all the items that have an active-class option.

Here is the problem, I do not want active links on any of my links, not even the main nav bar. It just doesn’t fit the structure of my app. But to disable it, I have to define two a class like this:

.navbar__btn_active::before {
  background-color: transparent;
}

which took me a while to figure out that I actually needed the ::before. Then I added a v-menu to one of the navbar buttons. Now each of the items in that v-menu lights up as being active when on a certain screen. This is even harder to figure out how to turn off the active tracking on these. I can add in my custom active-class, but that gets rid of the hover highlighting. 😦

So I have to create another css class:

.navbar__btn_active:hover::before {
  background-color: currentColor !important;
}

And after this, the hover highlight colour is different when I am on the matching page or not. When I am not on the matching page, the hover highlight colour is very faint. But when I am on the matching page, the hover colour is darker and more visible. (I prefer the darker version, BTW. the faint hover is too faint).

Anyway, this is a lot of finicky class setup that I am going to have to do all over my site. It would be a lot easier if the objects had a prop that could turn off the active tracking. I have seen

Proposed solution

Anyway, this is a lot of finicky class setup that I am going to have to do all over my site. It would be a lot easier if the objects had a prop that could turn off the active tracking.

a prop like “no-active-tracking” or something shorter would be a very welcome addition to buttons, v-list-items and whatever else tracks the active router link.

[kendallroth]

With Vuetify 3 this is done slightly differently (unfortunately still the same workaround)

<v-list-item active-class="custom-active-class" to="/route">Something</v-list-item>

.custom-active-class :deep(.v-list-item__overlay) {
  opacity: 0;
}

[gregveres]

*--active class is forced here https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/routable/index.ts#L50 regardless of active-class prop value

Is there any way to get around this or disable this behaviour? The only way I have found so far (but it is case-by-case) is to use a custom activeClass prop and then set ::before background to transparent.

Yea, unfortunately that is what I have had to do. Hopefully with Vuetify 3, John and company will take my suggestion to heart and provide a route button and a normal button so that we don’t have to deal with the active crap.