Skip to content

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

License

Notifications You must be signed in to change notification settings

Nelh/Next-sidebar

Repository files navigation

Next Sidebar

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

downoad License npm

Demo

Check the demo here

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 -

__

Browser Support

Chrome Firefox Safari Opera Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔

Donating

If you want to support the development of this extension, you can buy me a coffee

paypal Thank you!


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.