Adminlte: Sidebar menu, highlighting currently selected menu

[samoei]

It seems there is something am not getting right with the sidebar-menu. I can not get it to assign the active css class to the currently selected menu (or treeview menu in the case of tree). The dashboard menu is always active. I have gone through your app.js especially SIDEBAR MENU function (around line 555) but i cant see where your are assigning the currently selected menu a css active class. Kindly clarify for me. Thanks

[lenamtl]

Hi,
You have to add active class manually to the menu item html page

< li class="active" >

So you have to set it on every menu, if you duplicate the menu on every page.

It is not set dynamically, so if you embed the menu (include once the menu for all pages)
you will need custom script to detect the actual opened page and add the active class dynamically

[almasaeed2010]

@lenamtl is right you will have to use a custom plugin or manually by adding the active class to the elements.

[samoei]

@lenamtl @almasaeed2010 Thanks guys for the clarification. Cheers

[abaldwin99]

I've seen this done automatically with Jquery on standard bootstrap navbar items. Loop through the hrefs and if the link matches the current page then add the active class.

http://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li

[alpacin0]

In Laravel I do like this:
Route:

Route::group(['prefix' => 'person'], function(){
Route::get('{id}/Personal','UsersController@personal')->name('personal');
});

Sidebar-menu

 <ul class="sidebar-menu">
          <li class="treeview {!! Request::is('person/*/Personal') ? 'active' : '' !!}">
                <a href="{!!route('personal', $user)!!}">
                    <i class="fa fa-briefcase"></i>&nbsp;<span>Persona Example</span>
                </a>
        </li>
</ul>

[coscho]

here is my solution:

//Enable sidebar dinamic menu
$.AdminLTE.dinamicMenu();

/* DinamicMenu()
     * dinamic activate menu
     */
    $.AdminLTE.dinamicMenu = function() {
        var url = window.location;
        // Will only work if string in href matches with location
        $('.treeview-menu li a[href="' + url + '"]').parent().addClass('active');
        // Will also work for relative and absolute hrefs
        $('.treeview-menu li a').filter(function() {
            return this.href == url;
        }).parent().parent().parent().addClass('active');
    };

[TintinFr]

For Mutltilvel
/* DinamicMenu()
* dinamic activate menu
*/
$.AdminLTE.dinamicMenu = function () {
var path = $(location).attr('pathname');
// Will only work if string in href matches with location
$('.treeview-menu li a[href="' + path + '"]').parents().addClass('active');
};

[ecmascriptguru]

Hi,

I use this template in Vue.js and want to know how to mark left side menu item as active depending on route.

[lenamtl]

Hi, you can see my solution with JS and adapt it.

1482

[Iqbal487]

hi , i am using this Theme in my project , but when the page is load it shows the menu item for the first time .
When i clicked the dashboard item , it is not opened later .

After Reload the page for the first time

when i clicked the pull container right option it is clicked but menu dashboard item is not shown --

here is my code --

please help me to solve this problem

[dineshsuthar92]

In Laravel I do like this:
Route:

Route::group(['prefix' => 'person'], function(){
Route::get('{id}/Personal','UsersController@personal')->name('personal');
});

Sidebar-menu

 <ul class="sidebar-menu">
          <li class="treeview {!! Request::is('person/*/Personal') ? 'active' : '' !!}">
                <a href="{!!route('personal', $user)!!}">
                    <i class="fa fa-briefcase"></i>&nbsp;<span>Persona Example</span>
                </a>
        </li>
</ul>

Thanks buddy :smiley:

[neoacevedo]

For laravel, I don't play with blade, I use jQuery, just like this comment: https://github.com/almasaeed2010/AdminLTE/issues/1482#issuecomment-349304120 that worked to me.

[manikandanjmk]

This code will helpful to multiple multilevel in side menu...

$(document).ready(function(){
                /** add active class and stay opened when selected */
                var url = window.location;
                // for sidebar menu entirely but not cover treeview
                $('ul.sidebar-menu a').filter(function() {
                     return this.href == url;
                }).parent().addClass('active');

                // for treeview
                $('ul.treeview-menu a').filter(function() {
                     return this.href == url;
                }).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
            });

[Love9056]

$.AdminLTE.dinamicMenu = function() {
var url = window.location;
// Will only work if string in href matches with location
$('.treeview-menu li a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('.treeview-menu li a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
};

not working i have added this to my js file still not worked let me know how to apply this

[DEVRam86]

This code will helpful to multiple multilevel in side menu...

$(document).ready(function(){
                /** add active class and stay opened when selected */
                var url = window.location;
                // for sidebar menu entirely but not cover treeview
                $('ul.sidebar-menu a').filter(function() {
                     return this.href == url;
                }).parent().addClass('active');

                // for treeview
                $('ul.treeview-menu a').filter(function() {
                     return this.href == url;
                }).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
            });

Where to apply this. Kindly help. I am using this template as masterpage in asp.net web forms.

[muhammad-fahd]

In my case, none of the above was not working.

This is what I have done to set the multilevel menu selected.

var pageUrl = window.location.pathname; var menu = $('.sidebar .sidebar-menu li a[href="'+pageUrl+'"]').parent('li'); menu.addClass('active');

var treeLi = menu.parent().parent(); if (treeLi.hasClass('treeview')) treeLi.addClass('active');