Back to main Free Hosting Bootstrap Builder Free UI Kit
Navbar with large submenu dropdown illustration

Bootstrap multi-level dropdown menus

View demo Download

Get 700+ Material components for the latest Bootstrap 5 for free. This component is also available as ready-to-use solution in MDB UI Kit. Learn more about Bootstrap Dropdown here, or download MDB Free version with 700+ components here.

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?