Mobile Sidebar Navigation with Dropdown – Step-by-Step Guide

How to Create a Sidebar Navigation for Mobile with Dropdown Items

If you are building a mobile-friendly website, easy navigation is a must. One of the best ways to achieve this is by using a sidebar navigation for mobile with dropdown items. This not only makes your site easy to use but also keeps it clean and clutter-free.

In this tutorial, we’ll create a simple sidebar navigation menu for mobile devices using HTML, CSS, and jQuery. We’ll also add dropdown items for subcategories, making it perfect for blogs, eCommerce sites, or portfolios.

---

Why Use a Sidebar Navigation for Mobile?

Mobile users often have limited space on their screens. A sidebar menu allows you to:

• Save space by hiding navigation items until needed
• Add dropdowns for subcategories without cluttering the main menu
• Create a clean and modern user experience

---

Step 1: HTML Structure

We start by creating the basic structure for our menu:

<div class="menu-toggle">☰ Menu</div>

<nav class="side-navbar">
    <div class="close-btn">&times;</div>
    <ul>
        <li>Magazine</li>
        <li>Drummers</li>
        <li class="dropdown">
            News
            <ul class="dropdown-menu">
                <li>Local</li>
                <li>International</li>
            </ul>
        </li>
        <li>Media</li>
        <li>Shop</li>
        <li>Login</li>
    </ul>
</nav>

<div class="overlay"></div>

The .menu-toggle is the hamburger button. The .side-navbar contains our main navigation links. We also use an .overlay to dim the background when the menu is active.

---

Step 2: Styling with CSS

We style the sidebar so it slides in from the left, and also make it mobile-friendly:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.menu-toggle {
    background: #333;
    color: white;
    padding: 15px;
    cursor: pointer;
    font-size: 18px;
}

.side-navbar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background: black;
    transition: left 0.3s ease;
    padding-top: 60px;
}

.side-navbar.active {
    left: 0;
}

.side-navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-navbar li {
    color: white;
    padding: 14px 20px;
    cursor: pointer;
}

.dropdown-menu {
    display: none;
    background: #111;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.overlay.active {
    display: block;
}

Step 3: Adding jQuery for Interactivity

We use jQuery to handle menu opening, closing, and dropdown toggling:

$(document).ready(function () {
    $(".menu-toggle").click(function () {
        $(".side-navbar").toggleClass("active");
        $(".overlay").toggleClass("active");
    });

    $(".overlay, .close-btn").click(function () {
        $(".side-navbar").removeClass("active");
        $(".overlay").removeClass("active");
    });

    $(".dropdown").click(function (e) {
        e.stopPropagation();
        $(this).find(".dropdown-menu").slideToggle();
    });
});

Step 4: Testing

Once everything is set up, test it on a mobile device or by resizing your browser. The menu should:

• Slide in when you click the hamburger button
• Close when you click outside or on the close button
• Expand/collapse dropdown items when clicked

---

Final Thoughts

A sidebar navigation for mobile with dropdown items is a simple yet powerful feature to make your site easy to navigate on smaller screens. With HTML, CSS, and jQuery, you can implement it quickly without relying on heavy frameworks.

You can customize the colors, icons, and animations to match your website’s branding. Once implemented, your mobile users will enjoy a smoother, more intuitive browsing experience.

Aadya Multimedia offers a comprehensive Web Development Course designed for beginners and aspiring professionals. In this course, students learn complete website development from scratch, covering HTML, CSS, and jQuery to build responsive, interactive, and visually appealing websites. With practical, hands-on projects and expert guidance, learners gain the skills needed to create dynamic websites and kickstart their career in web development.