Topic: SideNav follows page

jkilbride free asked 5 years ago

Hi, On the website, the SideNav is always highlighted for the current page. Can you please share an example of the javascript that makes this work? Thanks! --jeff

jkilbride free answered 5 years ago

Hi Marta, That doesn't make much sense. The collapsible menu items need to be "clicked" in javascript in order to open correctly and display the submenu. You can't do that with PHP. For anyone else interested, I was able to accomplish this with the following:

// Highlight the correct SideNav menu item.
var menuItems = {
    '/account': [null, '#m-account'],
    '/': ['#m-dashboard', '#m-dash-overview']
var menu = menuItems[window.location.pathname] || [];
menu[0] && $(menu[0]).click();
menu[1] && $(menu[1]).addClass('active');
This works with SideNav items like the following:

<ul class="collapsible collapsible-accordion">
    <a id="m-account" href="/account"><i class="fa fa-user fa-fw"></i> Account</a>
    <a id="m-dashboard" class="collapsible-header waves-effect arrow-r">
      <i class="fa fa-bar-chart-o fa-fw"></i> Dashboard
      <i class="fa fa-angle-down rotate-icon"></i>
    <div class="collapsible-body">
        <li><a id="m-dash-overview" href="/" class="waves-effect">Overview</a></li>
The menuItems variable is an object with keys matching the URI path for the given page. The value for each path is an array with the "id" of the matching menu and submenu. Each time the page loads, the javascript clicks the menu item and adds the "active" class to the submenu. For top-level menus with no submenu, like the "/account" example above, just set the menu array item to "null". This is working for me. Thanks, --jeff

Marta Wierzbicka staff answered 5 years ago

Hi, this highlighted items works by adding class .active to the parent and child in sidenav list. Our developers wrote special custom PHP code for this and we can't share our backend code other people. Best, Marta

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

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No