When building a dynamic web application, the user interface (UI) needs to offer an intuitive navigation experience. Whether it’s an e-commerce site with multiple product categories or a content-heavy admin dashboard, having active states and expandable menus enhances usability. In this blog post, we’ll walk through creating a JavaScript script that dynamically highlights the current page in the navigation and expands relevant sections based on the user's path.
The Problem
When users navigate through multi-layered menus, we want:
- An active state on the current page link.
- Expandable sections that open automatically if the user is on a page nested within a menu.
Let’s look at an example HTML structure and how to add JavaScript to make our menu smart.
Example Menu Structure
Here’s a typical nested menu structure. We’ll be working with menu-item
for each item in the menu, menu-link
for links, and menu-sub
for collapsible submenus.
<!-- Categories -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-category'></i>
<div class="text-truncate">Product Categories</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="/category-list" class="menu-link">Category List</a>
</li>
</ul>
</li>
<!-- Inventory -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-library'></i>
<div class="text-truncate">Inventory Issues</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="/inventory-issues" class="menu-link">Recorded Issues</a>
</li>
<li class="menu-item">
<a href="/register-issue" class="menu-link">Register Issue</a>
</li>
</ul>
</li>
In this structure:
- Each main menu link (
menu-toggle
) opens a submenu when clicked. - The actual pages are in the submenu links (
menu-link
).
The JavaScript Solution
We’ll use JavaScript to:
- Identify the current page.
- Apply an
active
class to the link that matches the current URL. - Add an
open
class to the parent menu if the link is inside a collapsed submenu.
Here’s the JavaScript code:
<script>
window.onload = function () {
const currentPath = window.location.pathname; // Get the current path
const links = document.querySelectorAll('.menu-link'); // Select all menu links
links.forEach(function (link) {
// Check if the link's href matches the current page's path
if (link.getAttribute('href') === currentPath) {
// Add 'active' class to the parent 'li' element of the link
const menuItem = link.closest('.menu-item');
if (menuItem) {
menuItem.classList.add('active');
// Check if the link is within a 'menu-sub', expand the parent menu
const parentMenu = menuItem.closest('.menu-sub');
if (parentMenu) {
// Add 'open' class to the parent 'menu-item' of the submenu
const parentMenuItem = parentMenu.closest('.menu-item');
if (parentMenuItem) {
parentMenuItem.classList.add('open');
}
}
}
}
});
};
</script>
Breaking Down the Code
- Get the Current Path:
const currentPath = window.location.pathname;
This grabs the path of the current page (e.g., /inventory-issues
), which we’ll use to compare with the href
of each link in the menu.
- Select Menu Links:
const links = document.querySelectorAll('.menu-link');
We select all elements with the class menu-link
, assuming these contain links to various sections of the site.
- Matching the Current Page:
if (link.getAttribute('href') === currentPath) {
For each link, we check if its href
matches the currentPath
. If it does, that link is for the current page.
- Setting Active State:
menuItem.classList.add('active');
We add an active
class to the closest menu-item
, allowing us to style the active page link.
- Expanding the Parent Menu:
const parentMenuItem = parentMenu.closest('.menu-item');
parentMenuItem.classList.add('open');
If the active link is within a submenu (menu-sub
), this part of the code finds the parent menu-item
containing that submenu and adds the open
class, expanding it.
Adding CSS for Active and Open States
You’ll want to define styles for the active
and open
classes in your CSS:
/* Highlight the active link */
.menu-item.active > .menu-link {
font-weight: bold;
color: #007bff;
}
/* Display the open submenu */
.menu-item.open > .menu-sub {
display: block; /* or any style that reveals the submenu */
}
Benefits of this Approach
- Automatic Active State: No need for hardcoding the active link on every page. This script updates the active link dynamically.
- Expandable Menus: Users see only the sections relevant to their current page, reducing the need to manually open menus.
- Reusable: This script is generic enough to work with various nested menu structures, making it adaptable to multiple types of sites.