Prev Next

Navbar Dropdowns with Submenus: Extending Dropdown Menus for Deeper Navigation

Bootstrap 5 allows you to create multi-level dropdown menus by nesting dropdown-menu elements. This is useful for creating more complex navigation structures with submenus.

Key Topics

Basic Dropdown with Submenu

Create a multi-level dropdown menu by nesting dropdown-menu elements inside a parent menu item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                        <li><a class="dropdown-item" href="#">Action 1</a></li>
                        <li class="dropdown-submenu">
                            <a class="dropdown-item dropdown-toggle" href="#">More Options</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Sub Option 1</a></li>
                                <li><a class="dropdown-item" href="#">Sub Option 2</a></li>
                            </ul>
                        </li>
                        <li><a class="dropdown-item" href="#">Action 2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Explanation: Nest a dropdown-menu inside another dropdown-item to create a submenu. Add the dropdown-submenu class for clarity.

Custom Styling for Submenus

Customize the appearance of submenus using CSS to differentiate them visually from the parent menu.

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -5px;
}

Explanation: Submenus can be styled to appear next to their parent menu item using CSS positioning and alignment properties.

Responsive Submenus

Ensure that submenus work well on smaller devices by adding hover and click event handling with JavaScript.

document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(function (submenu) {
    submenu.addEventListener('click', function (e) {
        e.stopPropagation();
        submenu.nextElementSibling.classList.toggle('show');
    });
});

Explanation: JavaScript ensures submenus toggle properly on smaller devices, improving user interaction.

Complete Dropdown with Submenus Example

The following example demonstrates a fully functional multi-level dropdown menu with custom styling and responsive behavior.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Navbar Submenu Example</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .dropdown-submenu {
            position: relative;
        }
        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -5px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                            <li><a class="dropdown-item" href="#">Action 1</a></li>
                            <li class="dropdown-submenu">
                                <a class="dropdown-item dropdown-toggle" href="#">More Options</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Sub Option 1</a></li>
                                    <li><a class="dropdown-item" href="#">Sub Option 2</a></li>
                                </ul>
                            </li>
                            <li><a class="dropdown-item" href="#">Action 2</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(function (submenu) {
            submenu.addEventListener('click', function (e) {
                e.stopPropagation();
                submenu.nextElementSibling.classList.toggle('show');
            });
        });
    </script>
</body>
</html>

Explanation: This example demonstrates a complete multi-level dropdown menu with styling and JavaScript for responsive submenus.

Key Takeaways

  • Use nested dropdown-menu elements to create submenus.
  • Customize submenu styling using CSS for alignment and appearance.
  • Ensure responsiveness with JavaScript for toggling submenu visibility.
Prev Next