next-sidebar

v1.1.1

Published

2 years ago

Lightweight Sidebar Admin menu for Bootstrap Application, compatible with BS4 & BS5

Downloads

0High
0Medium
0Low

nelhamstrong

sidebar sidebar menu bootstrap sidebar navigation navigation menu

Demo

Check the demo here

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 | - |