Topic: Highlighting active nav item
I've copied several demos and have been unable to highlight the nav item. I set the "active" property properly; for example:
<mdb-nav-item href="#" waves-fixed active>Home</mdb-nav-item>
Can someone please help.
Hi,
The mdb-nav-item component adds the "active" class to the <a> tag, whereas it should add it to the parent <li> like Bootstrap does.
I made a pen with the current CDN version: https://codepen.io/migli/pen/ZEWGPBX
In the source component mdbvue/src/components/Navigation/NavbarItem.vue the active class is added with anchorClassName(), it should be added with className()
Magdalena Dembna staff commented 3 years ago
Thank you for your suggestion, we will take it under consideration in future development. Best regards, Magdalena
Zachary Bell priority commented 1 year ago
Looks like that codepen is not working, doesnt show active in dropdown.
Please download our demo app and launch it by typing 'npm install' and then 'npm run demo'. In this app You will find the working navbar example:
https://mdbootstrap.com/docs/vue/getting-started/download/
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.8.2
- Device: pc desktop
- Browser: chrome, edge
- OS: windows 10
- Provided sample code: No
- Provided link: No