Nested Dropdown

Bootstrap nested (multilevel) Dropdown - free examples

Nested dropdowns built with Bootstrap 5. Tutorial & templates for multilevel navbar dropdowns menu, activated on hover or on click & much more

By adding a few lines of additional CSS you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.

To learn more about dropdowns read Dropdown Docs.


Button dropdown

An example of a nested dropdown with a simple button.

        
            
                  <div class="dropdown">
                    <button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init
                      class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
                      data-mdb-toggle="dropdown" aria-expanded="false">
                      Dropdown button
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Another action</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#">
                          Submenu &raquo;
                        </a>
                        <ul class="dropdown-menu dropdown-submenu">
                          <li>
                            <a class="dropdown-item" href="#">Submenu item 1</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Submenu item 2</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Submenu item 3 &raquo; </a>
                            <ul class="dropdown-menu dropdown-submenu">
                              <li>
                                <a class="dropdown-item" href="#">Multi level 1</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#">Multi level 2</a>
                              </li>
                            </ul>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Submenu item 4</a>
                          </li>
                          <li>
                            <a class="dropdown-item" href="#">Submenu item 5</a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                  
        
    
        
            
                      .dropdown-menu li {
                      position: relative;
                      }
                      .dropdown-menu .dropdown-submenu {
                      display: none;
                      position: absolute;
                      left: 100%;
                      top: -7px;
                      }
                      .dropdown-menu .dropdown-submenu-left {
                      right: 100%;
                      left: auto;
                      }
                      .dropdown-menu > li:hover > .dropdown-submenu {
                      display: block;
                      }
                      
        
    

Navbar dropdown

An example of nested dropdown within the Navbar.

        
            
                  <nav class="navbar navbar-expand-lg bg-body-tertiary">
                    <div class="container-fluid">
                      <ul class="navbar-nav">
                        <!-- Dropdown -->
                        <li class="nav-item dropdown">
                          <a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#"
                            id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
                            Dropdown link
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li>
                              <a class="dropdown-item" href="#">Action</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Another action</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">
                                Submenu &raquo;
                              </a>
                              <ul class="dropdown-menu dropdown-submenu">
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 1</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 2</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 3 &raquo; </a>
                                  <ul class="dropdown-menu dropdown-submenu">
                                    <li>
                                      <a class="dropdown-item" href="#">Multi level 1</a>
                                    </li>
                                    <li>
                                      <a class="dropdown-item" href="#">Multi level 2</a>
                                    </li>
                                  </ul>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 4</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 5</a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </nav>
                  
        
    
        
            
                      .dropdown-menu li {
                      position: relative;
                      }
                      .dropdown-menu .dropdown-submenu {
                      display: none;
                      position: absolute;
                      left: 100%;
                      top: -7px;
                      }
                      .dropdown-menu .dropdown-submenu-left {
                      right: 100%;
                      left: auto;
                      }
                      .dropdown-menu > li:hover > .dropdown-submenu {
                      display: block;
                      }
                      
        
    

Navbar dropdown left

An example of a nested dropdown with the submenu expanding on the left side instead of the right side.

        
            
                  <nav class="navbar navbar-expand-lg bg-body-tertiary">
                    <div class="container-fluid">
                      <ul class="navbar-nav ms-auto">
                        <!-- Dropdown -->
                        <li class="nav-item dropdown">
                          <a data-mdb-dropdown-init class="nav-link dropdown-toggle" href="#"
                            id="navbarDropdownMenuLinkRight" role="button" data-mdb-toggle="dropdown"
                            aria-expanded="false">
                            Dropdown link
                          </a>
                          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkRight">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                              <a class="dropdown-item" href="#"> Submenu &raquo; </a>
                              <ul class="dropdown-menu dropdown-submenu dropdown-submenu-left">
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 1</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 2</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 4</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Submenu item 5</a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </nav>
                  
        
    
        
            
                      .dropdown-menu li {
                      position: relative;
                      }
                      .dropdown-menu .dropdown-submenu {
                      display: none;
                      position: absolute;
                      left: 100%;
                      top: -7px;
                      }
                      .dropdown-menu .dropdown-submenu-left {
                      right: 100%;
                      left: auto;
                      }
                      .dropdown-menu > li:hover > .dropdown-submenu {
                      display: block;
                      }
                      
        
    

Nested dropdown on hover

An example of a nested dropdown activated on hover, it can also be embedded inside on a Navbar .

        
            
                  <div class=" d-flex justify-content-center">
                    <div class="dropdown dropdown-hover">
                      <button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init
                        class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-mdb-toggle="dropdown" aria-expanded="false">
                        Dropdown button
                      </button>
                      <ul class="dropdown-menu dropdown-menu-hover" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li>
                          <a class="dropdown-item" href="#">Another action</a>
                        </li>
                        <li>
                          <a class="dropdown-item" href="#"> Submenu &raquo; </a>
                          <ul class="dropdown-menu dropdown-submenu">
                            <li>
                              <a class="dropdown-item" href="#">Submenu item 1</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Submenu item 2</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Submenu item 3 &raquo; </a>
                              <ul class="dropdown-menu dropdown-submenu">
                                <li>
                                  <a class="dropdown-item" href="#">Multi level 1</a>
                                </li>
                                <li>
                                  <a class="dropdown-item" href="#">Multi level 2</a>
                                </li>
                              </ul>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Submenu item 4</a>
                            </li>
                            <li>
                              <a class="dropdown-item" href="#">Submenu item 5</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </div>
                  
        
    
        
            
                    .dropdown-hover:hover>.dropdown-menu-hover {
                      display: block;
                    }
          
                    .dropdown-hover>.dropdown-toggle:active {
                      /*Without this, clicking will make it sticky*/
                      pointer-events: none;
                    }