Bootstrap Menu
Vertical sidebar with sub-menu template

Free vertical sidebar with sub-menu template for your projects, built with the latest Bootstrap, HTML, CSS & JavaScript. MIT Licensed - free for personal & commercial use.

edit & download Live preview
  • License
    MIT License
  • Free for commercial use?
  • Bootstrap version
  • NPM downloads
  • GitHub stars
    GitHub Repo stars

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=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

Get more free tools & themes

Join the newsletter to receive more free templates - including Instagram, Facebook or Amazon clone templates, as well as multiple free tools & resources.

    By subscribing you agree to receive the newsletter & commercial information from the data administrator StartupFlow s.c. Kijowska 7, Warsaw. Privacy Policy