The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself.
This plugin is fast, responsive, multi-level, SEO friendly, mobile, and non-mobile compatible built for dashboard, admin panel, and web app designs.
More options:
- It collapses and expands the submenus just like an accordion and tree.
- Hides cars on mobile devices.
- Two themes: dark and light.
- 2 styles: Style 1 display / Style 2 display
- It also provides the skeleton for developers.
Must Read: JavaScript Library for Off-Canvas Menus (mobile style) | offcanvas.js
How to make use of it:
1. Load the required assets in your Bootstrap 4 project.
<!-- Stylesheet --> <link rel="stylesheet" href="/path/to/bootstrap.css"> <link rel="stylesheet" href="/path/to/fontawesome/all.css"> <link 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>
2. Load the Sidebar Menu’s information within the document.
<link rel="stylesheet" href="dist/css/sidebar.css"> <script src="dist/js/sidebar.menu.js"></script>
3. Create the HTML for the sidebar menu.
<!-- sidebar -->
<nav role="navigation" class="sidebar sidebar-light rounded-0">
<!-- sidebar menu -->
<div class="sidebar-menu">
<!-- menu -->
<ul class="list list-unstyled list-scrollbar">
<!-- simple menu -->
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">Translate</p>
<!-- list items -->
<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">
<!-- list title -->
<p class="list-title text-uppercase">Dashboard</p>
<!-- list items, first level -->
<ul class="list-unstyled">
<li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-home"></i></span>Home</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>
<!-- list items, second level -->
<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">Maintenance</a>
<!-- list items, third level -->
<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>
<!-- notice info -->
<li>
<a href="#" class="list-link">
<div class="clearfix">
<div class="float-left"><span class="list-icon"><i class="fas fa-bell"></i></span>Notice</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">
<!-- list title -->
<p class="list-title text-uppercase">Coments</p>
<!-- list items, first level -->
<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 comments</a>
<!-- list items, second level -->
<ul class="list-unstyled list-hidden">
<li><a href="#" class="list-link">Disable</a></li>
<li><a href="#" class="list-link">Enable</a></li>
</ul>
</li>
</ul>
</li>
<!-- simple menu -->
<li class="list-item">
<!-- list title -->
<p class="list-title text-uppercase">Blog</p>
<!-- list items -->
<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>List</a></li>
</ul>
</li>
</ul>
</div>
</nav>4. To use the Dark theme, simply the sidebar-light with sidebar-dark:
<nav role="navigation" class="sidebar sidebar-light rounded-0"> ... </nav>
See Demo And Download
Official Website(compostrap): Click Here
This superior jQuery/javascript plugin is developed by compostrap. For extra advanced usage, please go to the official website.
