Next-sidebar NPM

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	-