next-sidebar
v1.1.1
Published
Lightweight Sidebar Admin menu for Bootstrap Application, compatible with BS4 & BS5
Downloads
35
Maintainers
Readme
Demo
Install
You can manually download Next-sidebar css here and js here
CDN jsDelivr
<!-- 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>
Download via npm
You can install and use next-sidebar with npm. It's registered as next-sidebar.
$ npm install next-sidebar
From sources
If 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 dev
Before using Next-sidebar
the 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
How to use
<body class="app is-collapsed">
<!-- Sidebar content here -->
<div class="container-wide">
<!-- Page content here -->
</div>
</body>
<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>
<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>
<a id="sidebar-toggle" class="sidebar-toggle nav-link" href="#">
<i class="fal fa-bars"></i>
</a>
Requirement
| 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 | - |
__
Browser Support
| | | | | | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Donating
If you want to support the development of this extension, you can buy me a coffee
Contributing
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.