Bootstrap multi-level dropdown menus
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 0pxto inner ul submenu - Make inner dropdown submenu visible
display:blockwhen 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