Bootstrap Menu
Vertical sidebar with collapsible sub-menu template

Free vertical sidebar with collapsible 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?
    Yes
  • Bootstrap version
    5.2.3+
  • NPM downloads
    npm
  • GitHub stars
    GitHub Repo stars

Bootstrap vertical sidebar with collapsible 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 has sidebar menu which can be done with nav and flex-column classes. But it doesn't offer submenus. In many cases you might need some extra inner collapsible menu when mouse clicks over any menu item. In this tutorial we will use bootstrap's javascript object new bootstrap.Collapse(element). It gives us smooth slide-down and slide-up animation effect. Before start make sure that you have included bootstrap.js file and your nav list is vertical.

Steps to create dropdown 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 and collapse to your inner submenu list.
  • Now we will add event listener to our parent links and find next element which is collapsible. With plain js it is clicked_link.nextElementSibling
  • Now we create another javascript object from Bootstrap's collapse function constructor new bootstrap.Collapse(my_collapsible_menu);
Here is the code for collapsible menu


Solution 2. We have another solution for sidebar dropdwon menu

Bootstrap has built in accordion functionality. It can be implemented anywhere - including menus. So, you just add special classes and and id for each element, then add data-bs-toggle="collapse". Check for more information on https://getbootstrap.com/docs/5.0/components/accordion/

We have included accordion based menu in out demo


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