README

Next Sidebar

Minimalistic but perfect Sidebar Menu for your Admin Application (Built with bootstrap)

Demo

Install

You can manually download Next-sidebar css here and js here

CDN jsDelivr

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>

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>

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>

Requirement

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	-