Topic: Highlighting active nav item

khilliard free asked 5 years ago

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.

Gilles Migliori free answered 4 years ago


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:

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 4 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.

Mikołaj Smoleński staff answered 5 years ago

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:

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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