Explain Codes LogoExplain Codes Logo

Bootstrap 4: Multilevel Dropdown Inside Navigation

html
responsive-design
css
javascript
Alex KataevbyAlex Kataev·Jan 30, 2025
TLDR

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!!"); }