Bootstrap 4: Multilevel Dropdown Inside Navigation
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:
Apply styling with CSS:
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:
Add dynamic behavior
Leverage JavaScript for dynamic submenu display, and to handle multiple open menus:
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:
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:
Was this article helpful?