Bootstrap multilevel dropdown menu
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 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 0pxto inner ul submenu - Make inner dropdown submenu visible
display:blockwhen mouse hovers parent li element
Here are basic code snippets
« Back to all examples