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


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 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:

https://mdbootstrap.com/docs/vue/getting-started/download/

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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