Minimalistic but perfect Sidebar Menu for your Admin Application (Built with bootstrap)
You can manually download Next-sidebar css here and js here
When you only need to include Next-sidebar compiled CSS or JS, you can use [jsDelivr](https://www.jsdelivr.com/).
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/next-sidebar@1/assets/css/next-sidebar.min.css"><!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/next-sidebar@1/assets/js/next-sidebar.min.js"></script>You can install and use next-sidebar with npm. It's registered as next-sidebar.
$ npm install next-sidebarIf you want to use the development version of the plugin, build from source manually.
$ git clone https://github.com/Nelh/Next-sidebar.git
$ cd next-sidebar
$ npm install
$ npm run devthe following requirement should meet.
- Ensure you have bootstrap 4 or higher installed
- Ensure you have jquery 3x installed
- Ensure you have an icons library installed for this example we use font awesome 5
<body class="app is-collapsed">
<!-- Sidebar content here -->
<div class="container-wide">
<!-- Page content here -->
</div>
</body>if you want to have the sidebar minify by default remove the class `.is-collapsed` from the body tag
<div class="sidebar">
<div class="sidebar-inner">
<div class="sidebar-logo">
<div class="d-flex align-items-center flex-nowrap">
<a class="sidebar-link text-decoration-none" href="#">
<div class="d-flex align-items-center flex-nowrap">
<div class="logo-sm">
<div class="logo d-flex align-items-center justify-content-center">
<!-- The Minify logo here -->
</div>
</div>
<div class="logo-text d-flex align-items-center justify-content-center">
<!-- The Full Logo here -->
</div>
</div>
</a>
<div class="">
<div class="mobile-toggle sidebar-toggle">
<a href="#" class="text-decoration-none">
<!-- closing sidebar icon here -->
</a>
</div>
</div>
</div>
</div>
<ul class="sidebar-menu scrollable position-relative">
<li class="nav-item dropdown">
<a class="nav-link" href="#">
<!-- Navigation icon here -->
<span class="icon-holder">
<i class="fal fa-home"></i>
</span>
<!-- Navigation link here -->
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
<span class="icon-holder">
<i class="fas fa-fingerprint"></i>
</span>
<span class="title">Auth</span>
<!-- Icon for dropdown here -->
<span class="arrow">
<i class="fas fa-angle-right"></i>
</span>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar-link" href="#">404</a>
</li>
</ul>
</li>
</ul>
</div>
</div>For dropdown and sub dropdown, you can use it as this
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
<!-- First level -->
</a>
<ul class="dropdown-menu">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
<!-- Second level -->
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
<!-- Third level -->
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
<!-- etc -->
</a>
</li>
</ul>
</li>
</ul>
</li>Add the button that will trigger the collapsing of the navigation menu in the page content
<a id="sidebar-toggle" class="sidebar-toggle nav-link" href="#">
<i class="fal fa-bars"></i>
</a>Those are few dependencies you might need to run this library
| Library | version | Description |
|---|---|---|
| Bootstrap 4, 5+ (required) | 4x,5x | Use as an extension of the bootstrap library |
| Jquery (required) | 3x | Only use to trigger click event, can be alter and remove at your conveniance |
| Font awesome (optional) | 5x | can be replace with any others icons library |
| Perfect Scrollbar (optional) | 1x | - |
__
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
If you want to support the development of this extension, you can buy me a coffee
If you have any idea, feel free to open an issue to discuss a new feature or fork and submit your changes back to me.