Sidebar menu collapse
Bootstrap 5 Sidebar menu collapse component
Responsive Sidebar menu collapse built with Bootstrap 5. Create sleek, user-friendly sidebars that expand and collapse effortlessly and navigation.
Basic example
In the basic version, the side navigation will appear over your website's content after clicking on a toggler.
Note: Use show and hide methods to toggle navigation with
JavaScript.
Note: Adding the show class to a sidenav collapse element will expand this
category on render.
<!-- Sidenav -->
<nav
data-mdb-sidenav-init
id="sidenav-1"
class="sidenav"
data-mdb-hidden="false"
>
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
>
<ul class="sidenav-collapse show">
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
>Link 5</a
>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Sidenav -->
<!-- Toggler -->
<button
data-mdb-ripple-init
data-mdb-toggle="sidenav"
data-mdb-target="#sidenav-1"
class="btn btn-primary"
aria-controls="#sidenav-1"
aria-haspopup="true"
>
<i class="fas fa-bars"></i>
</button>
<!-- Toggler -->
// Initialization for ES Users
import { Sidenav, initMDB } from "mdb-ui-kit";
initMDB({ Sidenav });