jQuery Plugins › jQuery Menu Plugins › jQuery Next Sidebar

Collapsible Sticky Sidebar Navigation In jQuery - Next Sidebar

File Size: 17.5 KB
Views Total: 4661
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap 5#bootstrap 4#Bootstrap#side menu
Collapsible Sticky Sidebar Navigation In jQuery - Next Sidebar

Next Sidebar is a simple jQuery plugin that helps you create a collapsible, sticky, multi-level sidebar navigation for admin panels and documentation websites.

Compatible with both Bootstrap 5 and Bootstrap 4 framework. 

How to use it:

1. Load the required resources in the document. Dependencies:

  • jQuery
  • Bootstrap 5 or Bootstrap 4 framework
  • An iconic font like Font Awesome
  • Perfect Scrollbar plugin (Optional but recommended)
<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
<!-- Perfect Scrollbar -->
<link rel="stylesheet" href="/path/to/cdn/css/perfect-scrollbar.css" />
<script src="/path/to/cdn/js/perfect-scrollbar.min.js"></script>

2. Add the CSS class 'app' to the body tag.

<body class="app">
  ...
</body>

3. The HTML structure for the multi-level sidebar navigation.

<div class="sidebar">
  <div class="sidebar-inner">
    <ul class="sidebar-menu scrollable position-relative pt-3">
      <li class="nav-item dropdown">
        <a class="nav-link wave-effect" href="#">
          <span class="icon-holder">
            <i class="fas fa-home"></i>
          </span>
          <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-folder-plus"></i>
          </span>
          <span class="title">Multiple Level</span>
          <span class="arrow">
            <i class="fas fa-angle-right"></i>
          </span>
        </a>
        <ul class="dropdown-menu">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#">
              <span>Menu Item</span>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#">
              <span class="title">Menu Items</span>
              <span class="arrow">
                <i class="fas fa-angle-right"></i>
              </span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Menu Item</a>
              </li>
              <li>
                <a href="#">Menu Item</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

4. Add a menu toggle button to the site nav.

<div class="container-wide">
  <nav class="navbar navbar-expand navbar-light bg-light">
    <ul class="navbar-nav me-auto">
      <li class="nav-item active">
        <a id="sidebar-toggle" class="sidebar-toggle nav-link" href="#">
          <i class="fas fa-bars"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </nav>
  ... Main Content Here ...
</div>

5. To collapse the sidebar navigation on page load, just add the CSS class 'is-collapsed' to the body tag. That's it.

<body class="app is-collapsed">
  ...
</body>

This awesome jQuery plugin is developed by Nelh. For more Advanced Usages, please check the demo page or visit the official website.