question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AdminLTE3 - how to fix active sidebar

See original GitHub issue

Environment:

  • AdminLTE Version: version 3 alpha 2
  • Operating System: All.
  • Browser (Version): All.

In the previous version of AdminLTE which is the Bootstrap 3 there is a fix to make the sidebar dynamically active when selected.

Here’s the code used

$(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');
  
});

but now in AdminLTE 3 this code is not working. Is anyone already tried this? and produced a resolution?

Thanks in advance

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15

github_iconTop GitHub Comments

59reactions
arbexmbcommented, Feb 27, 2021

Hello @jvbalcita

Can you test this, please:

/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.nav-sidebar a').filter(function() {
    return this.href == url;
}).addClass('active');

// for treeview
$('ul.nav-treeview a').filter(function() {
    return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
1reaction
kpsanmaocommented, Feb 27, 2021

it’s working @arbex10 . Thank you very much!

hey bro, this code ppaste where?sorry my english not good

放到基础模板或者每个页面的</body>前面。

$(document).ready(function() {
  /** add active class and stay opened when selected */
  var url = window.location;

  // for sidebar menu entirely but not cover treeview
  $('ul.nav-sidebar a').filter(function() {
      return this.href == url;
  }).addClass('active');

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

你这典型的中式英语,茫茫多的英语中一眼就能看出来是国人!

Read more comments on GitHub >

github_iconTop Results From Across the Web

AdminLTE Sidebar Active menu doesn't change dynamically
I try to change the active nav-link when another item is clicked and add "active" to the class. But it just doesn't fire...
Read more >
Main Sidebar Component | AdminLTE 3 Documentation
Main Sidebar Component. The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction...
Read more >
Showing active in parent and child menu on a drop down side ...
I want to highlight the active page on the side bar menu. I am using Bootstrap (AdminLTE 3) with laravel and vuejs.Kindly anyone...
Read more >
Sidebar AdminLTE - CodePen
* tree view menu. ... open : '.menu-open, .active', !
Read more >
active menu adminlte 3 using jquery - Code Grepper
AdminLTe 3.0.x /** add active class and stay opened when selected */ var url = window.location; // for sidebar menu entirely but not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found