Create Collapsible Sidebar Navigation Menu using JavaScript

Navigation is a crucial part of any web application and a sidebar menu is one of the most widely used patterns in dashboards, admin panels and productivity tools. Unlike a top navigation bar, the sidebar stays fixed on the side of the screen, making it easier to manage multiple categories and submenus.

In this guide, we will build a collapsible sidebar navigation menu using HTML, CSS and JavaScript. The sidebar will include a toggle button, expandable submenus and smooth animations for a modern user experience.

By the end of this tutorial, you’ll have a sidebar that starts in a collapsed state (showing only icons) but expands to reveal menu labels and submenus when toggled. This structure is perfect for projects like e-commerce, portfolios etc, where you want a professional and user-friendly dashboard-style layout.

HTML Structure

We begin by setting up the HTML layout for Collapsible Sidebar Navigation Menu. The structure is divided into two main sections:

<aside>
    <div class="sidebar">
        <div class="header">
            <div class="toggle-btn bx bx-menu-alt-left"></div>
            <div class="logo">CodeWebStack</div>
        </div>

        <ul class="menu">
            <li class="item">
                <a href="#"><span class="icon bx bxs-dashboard"></span><span class="name">Dashboard</span></a>

• Sidebar (aside): This holds the navigation system.
• Main Section (main): This is where the actual page content will appear. Its width automatically adjusts when the sidebar expands or collapses.

This HTML structure ensures that the sidebar remains organized and scalable. If you need to add more items or submenus in the future, you can simply add more li elements without breaking the layout.

In summary, the HTML acts as the skeleton of our sidebar. It clearly separates main items from expandable ones and prepares the foundation for styling and functionality.

CSS Styling

Once the structure is ready, we move to the CSS styling, which brings the sidebar to life. Our design focuses on usability, minimalism and smooth transitions.

@import url(https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css);

:root{
    --side-width: 18.75rem;
}

body {
    background: #00040b;
}

• Default Collapsed State: By default, the sidebar has a width of about 4.1rem, showing only icons. The main content section (main) expands to take the remaining width of the screen.
• Expanded State: When the sidebar gets the .is-open class, its width expands to 300px. This reveals the text labels (.name) next to the icons. Submenus also become visible and slide down.
• Menu Items: Each menu item has padding, hover effects and rounded shapes. Hovering changes the background to a subtle blue shade for better interactivity.
• Submenus: Initially hidden with zero height, submenus expand smoothly when activated. This is achieved using transition and dynamic height control.
• Icons: Boxicons are used for consistency and the chevron arrow rotates when a submenu is open, visually indicating the expanded state.
• Responsive Adjustments: The main area automatically shifts depending on sidebar width. This makes the layout responsive without complex CSS media queries.

Overall, the CSS ensures that the collapsible sidebar navigation menu looks modern, transitions smoothly and maintains readability whether collapsed or expanded.

JavaScript Functionality

Now comes the JavaScript, which handles interactivity. Without JavaScript, the collapsible sidebar navigation menu would remain static. Here’s what the script does:

const btn = document.querySelector('.toggle-btn');
const sidebar = document.querySelector('.sidebar');
const trigger = document.querySelectorAll('.sb-trigger');


const toggle = (e) => {
    const submenu = e.currentTarget.parentElement.querySelector('.submenu')

In short, the JavaScript adds dynamic behavior that makes the sidebar interactive, user-friendly and professional.

Final Thoughts

We’ve successfully built a collapsible sidebar navigation menu with expandable submenus, toggle functionality and responsive adjustments. This type of sidebar is ideal for dashboards, admin panels and applications where structured navigation is required.

The sidebar is:

• Minimal by default (collapsed view with icons).
• User-friendly when expanded (full labels and submenus).
• Responsive (main content adjusts automatically).
• Scalable (easy to add new items and submenus).

With this foundation, you can take the design further by adding:

• Active states to highlight the current page.
• Light/dark mode themes for personalization.
• Drag-to-resize functionality for advanced dashboards.

This collapsible sidebar navigation menu design balances simplicity and power, making it an excellent choice for modern web projects.