Open In App

Multi Level Menu Navbar Using Bootstrap 5

Last Updated : 10 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this tutorial, we will learn how to create a multi-level menu navbar using Bootstrap 5. This kind of navbar is perfect when you need to organize your website's content into multiple categories and subcategories.

In this article, we'll create a multi-level menu navbar using Bootstrap 5, a popular CSS framework that makes it easy to design responsive and visually appealing web pages.

Prerequisites

There are two main approaches to creating a multi-level menu navbar using Bootstrap 5:

Table of Content

1. Using Dropdowns

In this approach, we'll utilize Bootstrap's dropdown component to create a multi-level menu. Bootstrap’s dropdowns are easy to implement and provide basic functionality out of the box. Here, to create a multi-level menu, new will nest a dropdown-menu inside another dropdown menu and customize the appearance.


Example: Below example demonstrates the creation of a basic navbar using Bootstrap's navbar class.Use the dropdown class to create dropdown menus.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0" />
    <title>Multi-Level Menu Navbar - Approach 1</title>
    <!-- Bootstrap CSS -->
    <link href="
    https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet" />
    <style>
        body {
            margin-top: 20px;
            padding: 10px;
        }

        .brand-text {
            color: green;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .dropdown-submenu {
            position: relative;
        }

        .dropdown-submenu .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: 0;
            border-radius: 0.25rem;
            display: none;
        }

        .dropdown-submenu:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu.show {
            display: block;
        }
    </style>
</head>

<body style="margin: 15%">
    <div class="brand-text">
        GeeksforGeeks</div>

    <nav class="navbar navbar-expand-lg
     navbar-light bg-light">
        <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="navbarDropdown" role="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
                        Menu 1
                    </a>
                    <ul class="dropdown-menu" 
                    aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" 
                        href="#">Submenu 1-1</a></li>
                        <li class="dropdown-submenu">
                            <a class="dropdown-item 
                            dropdown-toggle" href="#">
                            Submenu 1-2</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item"
                                href="#">Submenu 1-2-1</a></li>
                                <li><a class="dropdown-item"
                                 href="#">Submenu 1-2-2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Menu 2</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Bootstrap JS -->
    <script src="
    https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src="
    https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
</script>
</body>

</html>


Output

2. Using Custom JavaScript

If you need more control over the behavior of your multi-level menu, you can use custom JavaScript. This approach allows you to create more complex interactions and animations. Here, we will use JavaScript code to handle the opening and closing of dropdowns and you can add animations, toggle submenus and more.


Example: Below example demonstrates creation of a basic navbar in which we will add menus as in the first approach and write JavaScript code to handle the opening and closing of dropdowns.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
     content="width=device-width,
      initial-scale=1.0" />
    <title>Multi-Level Menu Navbar - Approach 2</title>
    <!-- Bootstrap CSS -->
    <link href="
    https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
     rel="stylesheet" />
    <style>
        body {
            margin-top: 20px;
            padding: 10px;
        }

        .brand-text {
            color: green;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .dropdown-submenu .dropdown-menu {
            display: none;
        }

        .dropdown-submenu .dropdown-menu.show {
            display: block;
        }
    </style>
</head>

<body style="margin: 15%">
    <div class="brand-text">
        GeeksforGeeks</div>

    <nav class="navbar navbar-expand-lg
     navbar-light bg-light">
        <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="navbarDropdown" role="button"
                        data-bs-toggle="dropdown"
                         aria-expanded="false">
                        Menu 1
                    </a>
                    <ul class="dropdown-menu" 
                    aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item"
                        href="#">Submenu 1-1</a></li>
                        <li class="dropdown-submenu">
                            <a class="dropdown-item 
                            dropdown-toggle" href="#">
                            Submenu 1-2</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item"
                                href="#">Submenu 1-2-1</a></li>
                                <li><a class="dropdown-item"
                                href="#">Submenu 1-2-2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Menu 2</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Custom JavaScript -->
    <script>
        document
            .querySelectorAll(".dropdown-submenu a")
            .forEach(function (element) {
                element.addEventListener("click", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    this.nextElementSibling.classList.toggle("show");
                });
            });
    </script>

    <!-- Bootstrap JS -->
    <script src="
    https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js">
    </script>
    <script src="
    https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
</body>

</html>


Output


Next Article
Bootstrap 5 Navbar Scrolling

A
arshihauime
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox