Topic: Side-nav keep selected menu point active

LavazzaNordic pro asked 5 years ago


Adding "Active" to a menu point does not do what expected - is there a diferrent class name? <!-- Simple link --> <li><a class="waves-effect active" href="@item.Url"><i class="fa fa-hand-pointer-o"></i> @item.Name</a></li>

tilvalhall pro commented 5 years ago

I second that question. How to auto-expand/highlight active menu items on page load?

Sebastian Kaczmarek staff commented 5 years ago

Hi tilvalhall, Actually, there are two ways to accomplish that. First one is to use PHP. While generating the menu, you need to check if the current menu item is the one that is linked to the current page. If yes, then add class `active`. The second way is to use JavaScript, by simply checking if current link is the same as `href` attribute of the menu item. The disadvantage of this solution is that the link will obtain the class `active` after your JS script will be loaded. It will cause a little lag. Regards

TonyO pro answered 3 years ago


I just put up a snippet that works and I've been using it for quite awhile...you may find this a little easier to implement

https://mdbootstrap.com/snippets/jquery/tonyo/716383


Basil Buwalda free commented 3 years ago

Thanks Tony, the challenge I had was that I use collapseable headers in the sidenav which makes things a bit more complicated.


Bartłomiej Malanowski staff commented 3 years ago

Do you ned more help?


Basil Buwalda free answered 3 years ago


Hi, Any resolution on this problem?

I am experiencing the same issue.


Bartłomiej Malanowski staff commented 3 years ago

Do you use MDB jQuery or MDB Angular?


Basil Buwalda free commented 3 years ago

Hi, I have the same problem and I am using MDB jQuery.


Bartłomiej Malanowski staff commented 3 years ago

Could you please check @Sebastian Kaczmarek answer above?


Basil Buwalda free commented 3 years ago

Hi Bartlomiej, I am using MDB jQuery not Angular, however I have found a work around for now. I include this in my HTML Page.It isn't very elegant, but at least shows the correct menu item as active.Regards Basil$

$(function () { //Set the nav items active for the current link var queryString = "a[href^='" + window.location.pathname + "']"; var activeElements = $(queryString); activeElements.addClass("active");

//Set the Collapsible Menu to active and display the menu var parent = activeElements.parents("li:eq(1)"); var collapsibleHeader = parent.children("a.collapsible-header"); collapsibleHeader.addClass("active"); var collapsibleBody = parent.children("div.collapsible-body"); collapsibleBody.css("display", "block");

});


mdbpenguinglu pro answered 4 years ago


I tried putting active but it didn't work that is nothing was highlighted. Please help.
<mdb-item>
  <mdb-item-head mdbRippleRadius><i class="fa fa-chevron-right active"></i>Manage</mdb-item-head>
  <mdb-item-body>
    <ul>
      <li><a href="/games" class="waves-effect" mdbRippleRadius>Games</a></li>
      <li><a href="" class="waves-effect" mdbRippleRadius>Segments</a></li>
      <li class="waves-effect active"><a href="/games/{{ gameId }}/tags" class="waves-effect active" mdbRippleRadius>Tags</a></li>
    </ul>
  </mdb-item-body>
</mdb-item>



Sebastian Kaczmarek staff commented 4 years ago

Hi, I am redirecting this case to our Angular support. Please send your project at d.gemza@mdbootstrap.com. Our Angular team will help you. Regards, Sebastian


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

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags