Bootstrap 5 Multi-level Dropdown Menu

The web design scene is constantly reinventing itself in this competitive world. So creating an intuitive and user-friendly navigation system is essential for every website. Because it is crucial for the success of any website. The role of multi-level dropdown menus for organized and hierarchical navigation of a website is undeniable. In today's blog post, we will share a fully responsive multilevel dropdown navbar code sample built with the Bootstrap 5 framework. Each level of this responsive multilevel dropdown navbar is opened by hover.

The video tutorial below shows the step-by-step process of creating the complete snippet. Please watch the video before collecting the source code. And if you find the video tutorials useful, please subscribe to our YouTube channel.

Video Tutorial:

Hope you have watched the multilevel dropdown navbar video tutorial above. Multi-level dropdown menus provide a hierarchical structure for users to access subcategories or related elements. That's why it's much more effective than a simple dropdown menu. Today's websites often contain many different types of information, and it is essential to organize this information into logical categories and subcategories. Multi-level dropdowns help users quickly locate the information they need. Efficient navigation of a website is directly linked to user engagement. If a website's navigation system is clear and well-organized, visitors are more likely to explore other pages, spend more time on the website, and choose the desired product or service.

Despite its benefits, examples of multi-level dropdown menus built with Bootstrap 5 are rare online. Some of the reasons include Complex Implementation, Customization Challenges, Limited Documentation, etc. To help developers overcome the lack of examples, here we have designed a beautiful multi-level dropdown menu step by step. Each level is opened on hover and mobile screens all menu items and their submenus work like an accordion. This example can be used as a practical guide since it shows how to construct a multi-level navigation system within the Bootstrap 5 framework in a responsive and visually appealing manner.

You May Also Like:

Bootstrap 5 Multi-level Dropdown Menu [ Source code ]:

Add Bootstrap 5 CDN to the file shown in the video tutorial to create the multi-level dropdown navigation menu above. Then copy the code from the code box below and paste it into your HTML and CSS files. If there is any problem after opening the project in the browser, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Multi level Drop down Menu</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

          <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">About</a> 
          </li>

          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>

            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Service Name</a></li>
              <li><a class="dropdown-item" href="#">Service Name</a></li>                  
              <li><a class="dropdown-item" href="#">Service Name</a></li>                  
              <li><a class="dropdown-item" href="#">Service Name</a></li>

              <li class="nav-item dropend">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Service Name
                </a>

                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Service Name</a></li>
                  <li><a class="dropdown-item" href="#">Service Name</a></li>                      
                  <li><a class="dropdown-item" href="#">Service Name</a></li>                      
                  <li><a class="dropdown-item" href="#">Service Name</a></li>

                  <li class="nav-item dropend">

                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Service Name
                    </a>

                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Service Name</a></li>
                      <li><a class="dropdown-item" href="#">Service Name</a></li>
                      <li><a class="dropdown-item" href="#">Service Name</a></li>

                      <li class="nav-item dropend">

                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          Service Name
                        </a>
                        
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Service Name</a></li>
                          <li><a class="dropdown-item" href="#">Service Name</a></li>
                          <li><a class="dropdown-item" href="#">Service Name</a></li>
                          <li><a class="dropdown-item" href="#">Service Name</a></li>                                                           
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>

          <li class="nav-item">
            <a class="nav-link">Portfolio</a>
          </li>

          <li class="nav-item">
            <a class="nav-link">Contact</a>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-light" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js"></script>
</body>
</html>

ADD CSS:

.dropdown-item {
  color: #fff;
}
.dropdown .dropdown-menu {
  display: none;
  background: #212529;
}
.dropdown:hover>.dropdown-menu, 
.dropend:hover>.dropdown-menu {
  display: block;
  margin-top: .1em;
  margin-left: .1em;
}
@media screen and (min-width:769px) {
  .dropend:hover>.dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: .5em;
  }
}

Hope you were able to implement the code correctly. Multi-level dropdown navigation menus contribute immensely to creating more user-friendly and engaging websites. Hope the snippet comes in handy for your next project. If you want to get the source code of more such projects, click the Load More button on our homepage. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Bootstrap 5 Multi-level Dropdown Menu [ Source code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Multi-level Dropdown Menu

Video Tutorial:

Bootstrap 5 Multi-level Dropdown Menu [ Source code ]:

You might like

Post a Comment

Post a Comment

Contact Form