How to Create an Active Menu in AdminLTE 3 Using jQuery?

Estimated read time 2 min read

AdminLTE 3 is a popular Bootstrap-based admin template that provides a built-in menu system. Here’s how you can create an active menu in AdminLTE 3 using jQuery:

HTML code:

<aside class="main-sidebar">
	<section class="sidebar">
		<ul class="sidebar-menu" data-widget="tree">
			<li class="active"><a href="#"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
			<li><a href="#"><i class="fa fa-users"></i> <span>Users</span></a></li>
			<li><a href="#"><i class="fa fa-cog"></i> <span>Settings</span></a></li>
		</ul>
	</section>
</aside>

In this example, we have a simple AdminLTE 3 menu with three links.

jQuery code:

$(document).ready(function(){
	var currentUrl = window.location.href;
	var navLinks = $("aside.sidebar ul.sidebar-menu a");

	navLinks.each(function(){
		if($(this).attr("href") == currentUrl){
			$(this).parents("li").addClass("active");
			$(this).parents("li.treeview").addClass("active");
			$(this).addClass("active");
		}
	});
});

In this example, we use the $() function to select all the links in the sidebar menu, and we store them in the navLinks variable. We also get the current URL using the window.location.href property, and store it in the currentUrl variable.

We use the each() method to loop through each link in the menu. For each link, we compare its href attribute to the currentUrl variable. If they match, we use the parents() method to add the “active” class to the link’s parent li and li.treeview elements, as well as the link itself, using the addClass() method.

This code ensures that the appropriate menu item is highlighted as active based on the current URL.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply