Back to main
Navbar with large submenu dropdown illustration

Bootstrap multi-level dropdown menus

View demo Download

This is fully responsive multilevel dropdown navbar code sample. It is also called treeview menu. 1-st level dropdowns are opens by click, but inner submenus opens by mouse hover.

On mobile screens all menu items and their submenus work like accordion

Steps to create multilevel navbar dropdown menu with Bootstrap 5
  • Add your submenu ul li elements inside parent li
  • Hide inner dropdowns submenus by adding display:none.
  • Add position: absolute; left:100%; top:-7px; // or close to 0px to inner ul submenu
  • Make inner dropdown submenu visible display:block when mouse hovers parent li element
  • On smaller screens we add some javascript code to show submenus after each other, like accordion
Here are basic code snippets

Back to all examples

Creating an e-commerce project?