Topic: navbar item highlighting
I'm interesting in using your library to develop a vuejs app. I need a navbar as a menu to select different components using vuejs routing. Your nav-bar-item allows you to specify a href link so this should satisfy this requirement.
But I don't see how to highlight the clicked nav item selection. All your examples add an "active" property to highlight the nav item. Can you provide an example of how to highlight the nav item based on the router link's state.
NavItem component is integrated with vue router. When You click each item it will automatically add active class to it. Here's the example code for router:
<mdb-navbar dark position="top" class="default-color" scrolling :scrollingOffset="20">
<mdb-navbar-brand to="/" waves style="font-weight: bolder;">
MDB Vue
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav right>
<mdb-nav-item exact to="/" waves-fixed>Home</mdb-nav-item>
<mdb-nav-item to="/css" waves-fixed>CSS</mdb-nav-item>
<mdb-nav-item to="/components" waves-fixed>Components</mdb-nav-item>
<mdb-nav-item to="/advanced" waves-fixed>Advanced</mdb-nav-item>
<mdb-nav-item to="/navigation" waves-fixed>Navigation</mdb-nav-item>
<mdb-nav-item to="/forms" waves-fixed>Forms</mdb-nav-item>
<mdb-nav-item to="/tables" waves-fixed>Tables</mdb-nav-item>
<mdb-nav-item to="/modals" waves-fixed>Modals</mdb-nav-item>
<mdb-nav-item to="/plugins" waves-fixed>Plugins & addons</mdb-nav-item>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
Best regards
Victor Sirghii commented 5 years ago
That's correct, it automatically gets active when clicking on that nav-item. But what about jumping from one page to another not through mdb-navbar navigation, but from a page's anchors??? Ex, somewhere on page "Home" I click on an anchor linking to page "Tables" (a href="/Tables/" or router-link to="/Tables/"). In this case we do jump to page "Tables" with no problem but navbar losses its active navitem, and navbar is not highlighting menu of the current page. Any ideas about solving this scenario issue?
Mikołaj Smoleński staff commented 5 years ago
In this case I suggest to use Vuex state management pattern to store your active tab data: https://vuex.vuejs.org/
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.8.2
- Device: pc
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No