A jQuery/Bootstrap based mostly responsive, multi-level, Web optimization-friendly, mobile-compatible, off-canvas sidebar navigation created for dashboard, admin panel, net app designs.
Extra options:
- Collapses and expands sub menus similar to an accordion and tree.
- Auto hides on cell gadgets.
- 2 themes: Darkish and Mild.
- 2 types: Type 1 Demo / Type 2 Demo.
- Additionally supplies a Skeleton for builders.
- Suitable with Bootstrap 5 and Bootstrap 4.
Dependencies:
- jQuery library
- Bootstrap 4 or 5 framework
- Excellent scrollbar (for customized scrollbar). Non-compulsory.
- Font Superior (for menu icons). Non-compulsory.
- Nanobar (for web page loading indicator). Non-compulsory.
use it:
1. Load the required sources in your Bootstrap 4 challenge.
<!-- Stylesheet --> <hyperlink rel="stylesheet" href="/path/to/bootstrap.css"> <hyperlink rel="stylesheet" href="/path/to/fontawesome/all.css"> <hyperlink rel="stylesheet" href="/path/to/perfect-scrollbar.css"> <!-- JavaScript --> <script src="/path/to/jquery.js"></script> <script src="/path/to/bootstrap.bundle.js"></script> <script src="/path/to/perfect-scrollbar.js"></script> <script src="/path/to/nanobar.js"></script>
3. Load the Sidebar Menu‘s information within the doc.
<hyperlink rel="stylesheet" href="dist/css/sidebar.css"> <script src="dist/js/sidebar.menu.js"></script>
4. Create the HTML for the sidebar menu. That is it.
<!-- sidebar -->
<nav position="navigation" class="sidebar sidebar-light rounded-0">
<!-- sidebar menu -->
<div class="sidebar-menu">
<!-- menu -->
<ul class="checklist list-unstyled list-scrollbar">
<!-- easy menu -->
<li class="list-item">
<!-- checklist title -->
<p class="list-title text-uppercase">Translate</p>
<!-- checklist objects -->
<ul class="list-unstyled">
<li><a href="#" class="list-link">Czech</a></li>
<li><a href="#" class="list-link link-current">English</a></li>
</ul>
</li>
<!-- multi-level dropdown menu -->
<li class="list-item">
<!-- checklist title -->
<p class="list-title text-uppercase">Dashboard</p>
<!-- checklist objects, first degree -->
<ul class="list-unstyled">
<li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-home"></i></span>Dwelling</a></li>
<li><a href="#" class="list-link link-arrow link-current"><span class="list-icon"><i class="fas fa-tools"></i></span>Settings</a>
<!-- checklist objects, second degree -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Timezone</a></li>
<li><a href="#" class="list-link link-current">Permissions</a></li>
<li><a href="#" class="list-link link-arrow">Upkeep</a>
<!-- checklist objects, third degree -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">On</a></li>
<li><a href="#" class="list-link">Off</a></li>
</ul>
</li>
</ul>
</li>
<!-- discover information -->
<li>
<a href="#" class="list-link">
<div class="clearfix">
<div class="float-left"><span class="list-icon"><i class="fas fa-bell"></i></span>Discover</div>
<div class="float-right">
<span class="badge badge-danger">New</span>
<span class="badge badge-secondary">4</span>
</div>
</div>
</a>
</li>
</ul>
</li>
<!-- multi-level dropdown menu -->
<li class="list-item">
<!-- checklist title -->
<p class="list-title text-uppercase">Coments</p>
<!-- checklist objects, first degree -->
<ul class="list-unstyled">
<li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>New</a></li>
<li><a href="#" class="list-link link-arrow"><span class="list-icon"><i class="fas fa-comment"></i></span>Settings feedback</a>
<!-- checklist objects, second degree -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Disable</a></li>
<li><a href="#" class="list-link">Allow</a></li>
</ul>
</li>
</ul>
</li>
<!-- easy menu -->
<li class="list-item">
<!-- checklist title -->
<p class="list-title text-uppercase">Weblog</p>
<!-- checklist objects -->
<ul class="list-unstyled">
<li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-plus"></i></span>Add</a></li>
<li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-table"></i></span>Record</a></li>
</ul>
</li>
</ul>
</div>
</nav>
5. To make use of the Darkish theme, simply change the sidebar-light with sidebar-dark
<nav position="navigation" class="sidebar sidebar-light rounded-0"> ... </nav>
Changelog:
2026-06-07
2026-06-07
2026-05-15
2026-01-03
2025-01-29
2023-08-15
2023-02-08
2023-01-27
2022-03-08
2021-08-20
2021-08-19
- Added Bootstrap 5 help.
2021-05-12
2021-03-25
2020-10-09
2020-10-08
- added gradient for white and darkish theme
2020-10-07
2020-06-30
2020-01-17
This superior jQuery plugin is developed by compostrap. For extra Superior Usages, please verify the demo web page or go to the official web site.
