A sidebar menu that doesn’t visually highlight the current page leaves users guessing where they are in your app. This guide shows how to make a sidebar menu item active on click using jQuery \u2014 automatically applying an active class to the current page’s link, including support for nested treeview-style submenus like those used in the AdminLTE admin template.<\/p>\n\n\n\n
Before you start, make sure you have:<\/p>\n\n\n\n
Load jQuery, Bootstrap, and the AdminLTE JS files. Use Note:<\/strong> This example uses AdminLTE 2.3.11 to match the original template’s markup ( This script compares each menu link’s URL to the current page URL, and adds the Wrapping the logic in Here’s a working sidebar structure. Each A few issues in a typical first draft of this code would stop it from working correctly:<\/p>\n\n\n\n Highlighting the active sidebar menu item comes down to comparing each link’s Why does the treeview parent need a separate check?<\/strong> Because clicking a nested link only matches that specific Does this work with single-page applications (SPAs) that don’t do full page reloads?<\/strong> Not reliably. This approach checks Can I use this same technique outside of AdminLTE?<\/strong> Yes \u2014 the core logic (comparing Building out an admin dashboard or improving your site’s front end? Our team can help with front-end development and custom web application builds.<\/p>\n\n\n\n Connect with our technology experts.<\/a><\/p>\n\n\n\n<script><\/code> tags \u2014 not <source><\/code> \u2014 since <source><\/code> is only valid inside <video><\/code>, <audio><\/code>, or <picture><\/code> elements and will not execute JavaScript:<\/p>\n\n\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js\"><\/script>\n<\/pre>\n\n\n\n
\n
sidebar-menu<\/code>, treeview-menu<\/code> classes). If you’re starting a new project, check whether a newer AdminLTE version is a better fit, since the class names and structure can differ between major versions.<\/p>\n<\/blockquote>\n\n\n\nIII. Add the Active-Class Script<\/h3>\n\n\n\n
active<\/code> class to the matching item \u2014 including a separate check for nested treeview submenus:<\/p>\n\n\n\n$(document).ready(function () {\n var url = window.location.href;\n\n \/\/ Highlight top-level sidebar links\n $('ul.sidebar-menu a').filter(function () {\n return this.href === url;\n }).parent().addClass('active');\n\n \/\/ Highlight parent treeview when a nested link matches\n $('ul.treeview-menu a').filter(function () {\n return this.href === url;\n }).closest('.treeview').addClass('active');\n});\n<\/pre>\n\n\n\n$(document).ready(...)<\/code> ensures it only runs once the full page has loaded, so it doesn’t try to match links before they exist in the DOM.<\/p>\n\n\n\nIV. Build the Sidebar Menu HTML<\/h3>\n\n\n\n
<a><\/code> tag’s href<\/code> should point to a real page on your site \u2014 when that page loads, the script above will detect the match and apply the active<\/code> class automatically:<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <title>Admin Dashboard<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\n <!-- Bootstrap 3.3.4 -->\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/css\/bootstrap.css\" rel=\"stylesheet\" type=\"text\/css\">\n <!-- FontAwesome 4.7.0 -->\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.css\" rel=\"stylesheet\" type=\"text\/css\">\n <!-- Ionicons 2.0.1 -->\n <link href=\"https:\/\/code.ionicframework.com\/ionicons\/2.0.1\/css\/ionicons.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n <!-- AdminLTE Theme -->\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/css\/AdminLTE.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n <!-- AdminLTE Skin -->\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/css\/skins\/skin-blue.css\" rel=\"stylesheet\" type=\"text\/css\">\n<\/head>\n<body class=\"sidebar-mini skin-blue\">\n\n<aside class=\"main-sidebar\">\n <section class=\"sidebar\">\n <ul class=\"sidebar-menu\">\n <li class=\"header\">MAIN NAVIGATION<\/li>\n\n <li class=\"treeview\">\n <a href=\"#\">\n <i class=\"fa fa-dashboard\"><\/i> <span>Dashboard<\/span>\n <i class=\"fa fa-angle-left pull-right\"><\/i>\n <\/a>\n <ul class=\"treeview-menu\">\n <li><a href=\"index.html\"><i class=\"fa fa-circle-o\"><\/i> Dashboard v1<\/a><\/li>\n <li><a href=\"index2.html\"><i class=\"fa fa-circle-o\"><\/i> Dashboard v2<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li class=\"treeview\">\n <a href=\"#\">\n <i class=\"fa fa-files-o\"><\/i> <span>Layout Options<\/span>\n <span class=\"label label-primary pull-right\">4<\/span>\n <\/a>\n <ul class=\"treeview-menu\">\n <li><a href=\"pages\/layout\/top-nav.html\"><i class=\"fa fa-circle-o\"><\/i> Top Navigation<\/a><\/li>\n <li><a href=\"pages\/layout\/boxed.html\"><i class=\"fa fa-circle-o\"><\/i> Boxed<\/a><\/li>\n <li><a href=\"pages\/layout\/fixed.html\"><i class=\"fa fa-circle-o\"><\/i> Fixed<\/a><\/li>\n <\/ul>\n <\/li>\n\n <li>\n <a href=\"pages\/widgets.html\">\n <i class=\"fa fa-th\"><\/i> <span>Widgets<\/span>\n <small class=\"label pull-right bg-green\">new<\/small>\n <\/a>\n <\/li>\n\n <\/ul>\n <\/section>\n<\/aside>\n\n<div class=\"container\" style=\"padding:10px\">\n <!-- Page content goes here -->\n<\/div>\n\n<!-- Scripts -->\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.7.1\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/3.3.4\/js\/bootstrap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/admin-lte\/2.3.11\/js\/app.min.js\"><\/script>\n\n<script>\n $(document).ready(function () {\n var url = window.location.href;\n\n $('ul.sidebar-menu a').filter(function () {\n return this.href === url;\n }).parent().addClass('active');\n\n $('ul.treeview-menu a').filter(function () {\n return this.href === url;\n }).closest('.treeview').addClass('active');\n });\n<\/script>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\nV. What Was Fixed From the Original Markup<\/h3>\n\n\n\n
\n
<source><\/code> tags don’t run JavaScript.<\/strong> Every script include (jQuery, Bootstrap, AdminLTE, and the active-menu logic itself) needs to be inside a <script><\/code> tag, not <source><\/code> \u2014 browsers simply ignore JS placed in a <source><\/code> element.<\/li>\n\n\n\n<head><\/code> tags break the document structure.<\/strong> A page should only have one <head><\/code> opening and closing tag; nesting a second <head><\/code> inside the first produces invalid, unpredictable HTML.<\/li>\n\n\n\n<\/body><\/code> tag for faster initial page rendering.<\/li>\n\n\n\n==<\/code>) was used to compare checked<\/code>\/URL values<\/strong> in similar scripts \u2014 using strict equality (===<\/code>) avoids unexpected type-coercion bugs and is generally better practice in JavaScript.<\/li>\n<\/ul>\n\n\n\nVI. Conclusion<\/h3>\n\n\n\n
href<\/code> against the current page URL with jQuery, then applying an active<\/code> class to the matching item \u2014 with a second check to also activate any parent treeview when a nested link matches. Fixing the <source><\/code>-instead-of-<script><\/code> mistake and removing the duplicate <head><\/code> tag are what actually make this example run; without those two corrections, the script never executes at all.<\/p>\n\n\n\n
\n\n\n\nFrequently Asked Questions<\/h2>\n\n\n\n
<a><\/code> tag \u2014 without the second filter targeting .treeview-menu a<\/code>, the parent dropdown itself would never get the active<\/code> class, even though one of its child links matches the current page.<\/p>\n\n\n\nwindow.location.href<\/code> on page load, so it works well for traditional multi-page sites. For SPAs using client-side routing, you’d typically hook into the router’s navigation events instead.<\/p>\n\n\n\nthis.href<\/code> to the current URL and adding a class) works with any sidebar markup. You’d just adjust the jQuery selectors (ul.sidebar-menu<\/code>, ul.treeview-menu<\/code>) to match your own menu’s class names.<\/p>\n\n\n\n
\n\n\n\nTalk to Our Technology Experts<\/h2>\n\n\n\n
Related Articles<\/h2>\n\n\n\n