Side panel
Bootstrap 5 Side panel component
Responsive Side panel built with Bootstrap 5. Examples of responsive side panels which include slides, navigation, collapsing and more.
Basic example
In the basic version, the side panel will appear over your website's content after clicking on a toggler.
Note: Use show and hide methods to toggle panel with JavaScript.
Note: Adding the show class to a sidenav collapse element will expand this category on render.
<!-- Sidepanel-->
<nav id="sidepanel-1" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute">
<div class="text-center">
<h3 class="pt-3 pb-2">Examples</h3>
<hr class="m-0" />
</div>
<ul class="sidenav-menu">
<li>
<a class="sidenav-link"> <i class="fas fa-tachometer-alt fa-fw fa-lg me-3"></i><span>Main dashboard</span> </a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-chart-area fa-fw fa-lg me-3"></i><span>Webiste traffic</span> </a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-lock fa-fw fa-lg me-3"></i><span>Password</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-chart-line fa-fw fa-lg me-3"></i><span>Analytics</span></a>
</li>
<li>
<a class="sidenav-link"> <i class="fas fa-chart-pie fa-fw fa-lg me-3"></i><span>SEO</span> </a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-chart-bar fa-fw fa-lg me-3"></i><span>Orders</span></a>
</li>
</ul>
</nav>
<!-- Sidepanel-->
<!-- Toggler -->
<div style="padding: 20px;" class="text-center">
<button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidepanel-1" data-mdb-ripple-init class="btn btn-primary">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Toggler -->
Slide
Passing a selector of an inner element to the
scrollContainer option will initialize MDB scrollbar only on this container (by default it's initialized on the sidenav's main element).
<!-- Sidepanel-->
<nav id="sidepanel-2" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute" data-mdb-scroll-container="#scroll-container">
<div class="text-center">
<h3 class="pt-3 pb-2">Examples</h3>
<hr class="m-0" />
</div>
<ul id="scroll-container" class="sidenav-menu">
<li>
<a class="sidenav-link"> <i class="fas fa-tachometer-alt fa-fw fa-lg me-3"></i><span>Main dashboard</span> </a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-chart-area fa-fw fa-lg me-3"></i><span>Webiste traffic</span> </a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-lock fa-fw fa-lg me-3"></i><span>Password</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-chart-line fa-fw fa-lg me-3"></i><span>Analytics</span></a>
</li>
<li>
<a class="sidenav-link"> <i class="fas fa-chart-pie fa-fw fa-lg me-3"></i><span>SEO</span> </a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-chart-bar fa-fw fa-lg me-3"></i><span>Orders</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-globe fa-fw fa-lg me-3"></i><span>International</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-building fa-fw fa-lg me-3"></i><span>Partners</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-calendar fa-fw fa-lg me-3"></i><span>Calendar</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-users fa-fw fa-lg me-3"></i><span>Users</span></a>
</li>
<li>
<a class="sidenav-link"><i class="fas fa-money-bill fa-fw fa-lg me-3"></i><span>Sales</span></a>
</li>
</ul>
<div class="text-center" style="min-height: 3rem;">
<hr class="mt-0 mb-2" />
<small>mdbootstrap.com</small>
</div>
</nav>
<!-- Sidepanel-->
<!-- Toggler -->
<div style="padding: 20px;" class="text-center">
<button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidepanel-2" data-mdb-ripple-init class="btn btn-primary">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Toggler -->
Collapse
Add .sidenav-collapse to ul to get collapse side panel.
<!-- Sidepanel-->
<nav id="sidepanel-3" data-mdb-sidenav-init class="sidenav" data-mdb-position="absolute">
<ul class="sidenav-menu">
<li>
<a class="sidenav-link"> <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
</li>
<li>
<a class="sidenav-link"> <i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span><i class="fas fa-angle-down rotate-icon"></i> </a>
<ul class="sidenav-collapse collapse">
<li>
<a class="sidenav-link">Link 2</a>
</li>
<li>
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</li>
<li>
<a class="sidenav-link"> <i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span><i class="fas fa-angle-down rotate-icon"></i> </a>
<ul class="sidenav-collapse collapse">
<li>
<a class="sidenav-link">Link 4</a>
</li>
<li>
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Sidepanel-->
<!-- Toggler -->
<div style="padding: 20px;" class="text-center">
<button data-mdb-button-init data-mdb-toggle="sidenav" data-mdb-target="#sidepanel-3" data-mdb-ripple-init class="btn btn-primary">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Toggler -->
Slim example
You can hide/show elements in the slim mode by setting
data-mdb-slim attribute on them - depending on value they will be either visible
only in a slim or an expanded mode. Elements without this attribute will appear in both modes.
<!-- Sidenav-->
<nav
id="sidepanel-4"
data-mdb-sidenav-init class="sidenav"
data-mdb-mode="side"
data-mdb-slim="true"
data-mdb-slim-collapsed="true"
data-mdb-content="#slim-content"
>
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link">
<i class="far fa-smile me-3"></i
><span data-mdb-slim="false">Link 1</span></a
>
</li>
<li class="sidenav-item">
<a class="sidenav-link"
><i class="fas fa-grin me-3"></i
><span data-mdb-slim="false">Category 1</span></a
>
<ul class="sidenav-collapse">
<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 me-3"></i
><span data-mdb-slim="false">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-->
<!-- Togglers -->
<div id="slim-content">
<button data-mdb-button-init
data-mdb-toggle="sidenav"
data-mdb-target="#sidepanel-4"
data-mdb-ripple-init class="btn btn-primary"
aria-controls="#sidepanel-4"
aria-haspopup="true"
>
<i class="fas fa-bars"></i>
</button>
<button data-mdb-button-init id="slim-toggler" data-mdb-ripple-init class="btn btn-primary">
Toggle slim
</button>
</div>
<!-- Togglers -->
//Use show() method to make it instantly visible
const slimInstance = mdb.Sidenav.getInstance(document.getElementById('sidenav-4'));
slimInstance.show();
document.getElementById('slim-toggler').addEventListener('click', () => {
slimInstance.toggleSlim();
})