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

Bootstrap vertical sidebar with collapsible sub-menu

Demo (collapsible) Demo (accordion) Download all

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

We have included accordion based menu in out demo

Back to all examples

Creating an e-commerce project?