Creating a Dynamic Navigation Script for Active State and Expandable Menus

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:

1. An active state on the current page link.
2. 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:

1. Identify the current page.
2. Apply an active class to the link that matches the current URL.
3. 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

1. 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.

1. 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.

1. 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.

1. 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.

1. 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.

💖 from eddiegulay