Back to main Free Hosting Bootstrap Builder Free UI Kit
Sidebar navigation menu illustration

Bootstrap vertical sidebar with sub-menu

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.

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=submenu to your inner submenu list.
  • Hide inner dropdowns submenus by adding display:none.
  • Add position: absolute; left:100%; top:-7px; // or close to 0px to inner ul submenu
  • Make submenus visible by added 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 is the basic code for sidebar menu

Back to all examples

Creating an e-commerce project?