« Back to main
Multi level, Treeview menu illustration

Bootstrap multilevel dropdown menu

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 opened by hover effect. If you want to make all menus work with hover, then check the tutorial about dropdown menu hover effect

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

Steps to create multilevel navbar dropdown menu with Bootstrap 4
  • 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
Here are basic code snippets

« Back to all examples

Creating e-commerce project?