Bootstrap vertical sidebar with sub-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.
Bootstrap already has basic sidebar menu which can be done with .nav class. But it doesn't offer multi-level menu. In many cases it is important to show some extra menu when mouse hovers over any menu item. Before start make sure we have added flex-column next to the nav class like class="nav flex-column". navigation becomes vertical
Steps to create multilevel sidebar menu with Bootstrap 5
- Add your submenu ul li elements after the menu link, make sure you are inside the li element with
class="nav-item" - Add your own class like
class=submenuto your inner submenu list. - Hide inner dropdowns submenus by adding
display:none. - Add
position: absolute; left:100%; top:-7px; // or close to 0pxto inner ul submenu - Make submenus visible by added
display:blockwhen mouse hovers parent li element - On smaller screens we add some javascript code to show submenus after each other, like accordion
Here is the basic code for sidebar menu
Back to all examples