next-sidebar

--- layout: default title: Blank --- <div class="container mt-5"> <a href="#"> <img src="https://raw.githubusercontent.com/Nelh/Next-sidebar/HEAD/assets/images/next-full.png"> </a> <h1 align="center"> Next Sidebar </h1> Minimalistic but perfect Sidebar Menu for your Admin Application (Built with bootstrap) <a href="https://img.shields.io/npm/dt/next-sidebar"> <img src="https://img.shields.io/npm/dt/next-sidebar" alt="downoad"></a> <a href="https://github.com/Nelh/Next-sidebar/blob/main/LICENSE"> <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> <a href="https://badge.fury.io/js/next-sidebar"> <img src="https://badge.fury.io/js/next-sidebar.svg" alt="npm"></a> <a href="https://nodei.co/npm/next-sidebar/"><img src="https://nodei.co/npm/next-sidebar.png?downloads=true&downloadRank=true&stars=true"></a> <div class="row"> <div class="col-md-8 offset-md-2 col-12"> <div class="mb-4"> <h2 id="install">Install</h2> You can manually download Next-sidebar <a href="https://cdn.jsdelivr.net/npm/next-sidebar@1/assets/css/next-sidebar.css">css here</a> and <a href="https://cdn.jsdelivr.net/npm/next-sidebar@1/assets/js/next-sidebar.js">js here</a> </div> <div class="mb-4"> <h4 id="cdn-jsdelivr">CDN jsDelivr</h4> When you only need to include Next-sidebar compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/">jsDelivr</a>. </div> <div> <pre class='code code-html scrollable'><code class="scrollable"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/next-sidebar@1/assets/css/next-sidebar.min.css"></code></pre> </div> <pre class="code code-html html scrollable"><code class="scrollable"> <script src="https://cdn.jsdelivr.net/npm/next-sidebar@1/assets/js/next-sidebar.min.js"></script></code></pre> <div> <h4 id="download-via-npm">Download via npm</h4> You can install and use next-sidebar with npm. It's registered as <a href="https://www.npmjs.com/package/next-sidebar">next-sidebar</a>. <pre class="code code-javascript"><code class="scrollable">$ npm install next-sidebar</code></pre> <h4 id="from-sources">From sources</h4> If you want to use the development version of the plugin, build from source manually. <pre class="code code-javascript"><code class="scrollable">$ git clone https://github.com/Nelh/Next-sidebar.git $ cd next-sidebar $ npm install $ npm run dev</code></pre> </div> <h2 id="before-using-next-sidebar">Before using Next-sidebar</h2> the following requirement should meet. <ul> <li>Ensure you have bootstrap 4 or higher installed</li> <li>Ensure you have jquery 3x installed</li> <li>Ensure you have an icons library installed for this example we use font awesome 5</li> </ul> <h2 id="how-to-use">How to use</h2> <pre class="code code-html"><code class="scrollable"><body class="app is-collapsed">  <div class="container-wide">  </div> </body></code></pre> if you want to have the sidebar minify by default remove the class <code class="scrollable">.is-collapsed</code> from the body tag <pre class="code code-html"><code class="scrollable"><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">  </div> </div> <div class="logo-text d-flex align-items-center justify-content-center">  </div> </div> </a> <div class=""> <div class="mobile-toggle sidebar-toggle"> <a href="#" class="text-decoration-none">  </a> </div> </div> </div> </div> <ul class="sidebar-menu scrollable position-relative"> <li class="nav-item dropdown"> <a class="nav-link" href="#">  <span class="icon-holder"> <i class="fal fa-home">  <span class="title">Dashboard </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#"> <span class="icon-holder"> <i class="fas fa-fingerprint"> <span class="title">Auth  <span class="arrow"> <i class="fas fa-angle-right"> </a> <ul class="dropdown-menu"> <li> <a class="sidebar-link" href="#">404</a> </li> </ul> </li> </ul> </div> </div></code></pre> For dropdown and sub dropdown, you can use it as this <pre class="code code-html"><code class="scrollable"><li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">  </a> <ul class="dropdown-menu"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">  </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#">  </a> <ul class="dropdown-menu"> <li> <a href="#">  </a> </li> </ul> </li> </ul> </li></code></pre> Add the button that will trigger the collapsing of the navigation menu in the page content <pre class="code code-html html"><code class="scrollable"><a id="sidebar-toggle" class="sidebar-toggle nav-link" href="#"> <i class="fal fa-bars"> </a></code></pre> <h2 id="requirement">Requirement</h2> Those are few dependencies you might need to run this library <table class="table"> <thead> <tr class="header"> <th align="left">Library</th> <th align="left">version</th> <th align="left">Description</th> </tr> </thead> <tbody> <tr class="odd"> <td align="left">Bootstrap 4, 5+ (required)</td> <td align="left">4x,5x</td> <td align="left">Use as an extension of the bootstrap library</td> </tr> <tr class="even"> <td align="left">Jquery (required)</td> <td align="left">3x</td> <td align="left">Only use to trigger click event, can be alter and remove at your conveniance</td> </tr> <tr class="odd"> <td align="left">Font awesome (optional)</td> <td align="left">5x</td> <td align="left">can be replace with any others icons library</td> </tr> <tr class="even"> <td align="left">Perfect Scrollbar (optional)</td> <td align="left">1x</td> <td align="left">-</td> </tr> </tbody> </table> __ <h2 id="browser-support">Browser Support</h2> <table class="table"> <thead> <tr class="header"> <th align="left"><img src="https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" /></th> <th align="left"><img src="https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" /></th> <th align="left"><img src="https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" /></th> <th align="left"><img src="https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" /></th> <th align="left"><img src="https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" /></th> </tr> </thead> <tbody> <tr class="odd"> <td align="left">Latest ✔</td> <td align="left">Latest ✔</td> <td align="left">Latest ✔</td> <td align="left">Latest ✔</td> <td align="left">Latest ✔</td> </tr> </tbody> </table> <hr /> <h2 id="donating">Donating</h2> If you want to support the development of this extension, you can buy me a coffee <a href="https://paypal.me/lembongui"><img src="https://www.paypalobjects.com/en_AU/i/btn/btn_donateCC_LG.gif" alt="paypal" /></a> Thank you! <hr /> <h2 id="contributing">Contributing</h2> 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. </div> </div> </div>