Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue router's link active class naming convention (BEM) #3007

Closed
webcoderkz opened this issue Oct 22, 2019 · 1 comment

Comments

@webcoderkz
Copy link

@webcoderkz webcoderkz commented Oct 22, 2019

What problem does this feature solve?

Right now, we can override a class name for an active router link menu, but it doesn't solve a problem, if we have, for example, 2 different navbar's across our web application. I am using BEM (https://en.bem.info/methodology/), so let's say if i override an active class name to "navbar__link_active" in the first navbar (parent is "navbar" class), then i would get the same class name in my 2nd navbar, though i have a different parent class on it "footer-menu", so it should have "footer-menu__link_active" class ideally.

code example:

// i overrided an active class to "navbar__link_active"
<ul class="navbar">
  <router-link class="navbar__link navbar__link_active">Menu 1 is active</router-link>
  <router-link class="navbar__link">Menu 2</router-link>
  <router-link class="navbar__link">Menu 3</router-link>
</ul>

// 2nd navbar
<ul class="footer-navbar">
  <router-link class="footer-navbar navbar__link_active">Menu 1 is active</router-link>
  <router-link class="footer-navbar">Menu 2</router-link>
  <router-link class="footer-navbar">Menu 3</router-link>
</ul>
// notice here, an active class would be the same, as for the 1st navbar, that's not what i wanted, instead it should be "footer-navbar__link_active"

What does the proposed API look like?

There should be a setting in a router instance config, to set an active class for specific menus or something like that.

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Oct 23, 2019

use the active-class prop if you need to change the active class of a link. Choosing BEM or any other css framework doesn't affect the router, you apply classes the same way

@posva posva closed this Oct 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.