Bootstrap 4: Multilevel Dropdown Inside Navigation

html

responsive-design

css

javascript

byAlex Kataev·Jan 30, 2025

Implementing a multilevel dropdown in Bootstrap 4 involves nesting .dropdown-menu within a .dropdown-item. Use a custom class such as .dropdown-submenu for nested items and apply CSS for proper submenu positioning:

<!-- The classic list-item nav -->
<li class="nav-item dropdown">
  <!-- The awesome dropdown toggle -->
  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Dropdown</a>
  <!-- Let the nesting begin! -->
  <ul class="dropdown-menu">
    <!-- Deployment of the submenu -->
    <li class="dropdown-submenu">
      <a class="dropdown-toggle" href="#">Submenu</a>
      <!-- Further nesting because why not? -->
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <!-- Submenu inception level two -->
        <li class="dropdown-submenu">
            <a class="dropdown-toggle" href="#">Submenu Level 2</a>
            <!-- More nesting, hold on to your seats! -->
            <ul class="dropdown-menu">
                <li><a href="#">Another Action</a></li>
            </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

Apply styling with CSS:

/* Relocate submenu to the side--surprise! */
.dropdown-submenu .dropdown-menu { 
  position: absolute;
  top: 0; 
  left: 100%; 
  margin-top: -1px; 
}

And of course, ensure the JavaScript lords, jQuery and Bootstrap, are included for functionality.

Better interactivity & accessibility

Hover & Focus states

For an enhanced UI, employ hover and focus states using CSS pseudo-classes. This signals menu item selection to users:

/* Now you see me... */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus > .dropdown-menu {
    display: block;
}

Add dynamic behavior

Leverage JavaScript for dynamic submenu display, and to handle multiple open menus:

/* This one goes to its own tune! */
$('.dropdown-submenu a').on("click", function(e) {
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
});

This simple code lets each submenu open independently and remain open when interacting with other items.

Customize & advance

You can customize your dropdown menu's appearance and behavior using advanced code patterns. Thus, crafting a fully dynamic menu, generated from JSON data or a server-side framework:

/* Craft your own menu like a boss! */
function generateMenu(menuArray) {
    /* Start the delicious menu list */
    let html = '<ul class="dropdown-menu">';
    
    menuArray.forEach(item => {
        /* Add each element with care, like baking a cake */
        html += '<li class="dropdown-submenu">';
        html += `<a class="dropdown-toggle" href="#">${item.title}</a>`;
        
        if(item.submenu) {
            /* Convert the cake into a layered cake */
            html += generateMenu(item.submenu);
        }
        html += '</li>';
    });
    /* And voila! Bon Appetit! */
    html += '</ul>';
    return html;
}

Compatibility & clean code

Check your code for compatibility with Bootstrap v4.4.1. Remove unnecessary or extra CSS to keep your dropdowns clean and intuitive:

/* Does it pass the 4.4.1 check? If not release the Krakens! */
if (BootstrapVersion !== "4.4.1") {
    console.error("Unleash the Krakens!! Compatibility Error!!");
}