Sidebar Push Navigation With jQuery And Bootstrap 4 - sidebar-menu

A modern, responsive, mobile-friendly, multi-level sidebar push navigation system designed for dashboard & admin panel, built with jQuery, Bootstrap 4 and Font Awesome.

Click/tap the hamburger button to toggle the sidebar navigation. The main content section will be pushed to the right when the sidebar navigation is opened.

How to use it:

1. Load the necessary jQuery (full version), Bootstrap 4 framework, and Font Awesome iconic font in the HTML document.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. Load the jQuery sidebar-menu plugin's files in the document.

<link rel="stylesheet" href="css/sidebar.menu.css">
<script src="js/sidebar.menu.js"></script>

3. Load a theme CSS of your choice in the document.

<link rel="stylesheet" href="css/sidebar.menu.white.css">
<link rel="stylesheet" href="css/sidebar.menu.dark.css">

4. Create the sidebar navigation from nested HTML lists as follows:

<div class="d-flex" id="wrapper">

  <!-- sidebar menu -->
  <div class="sidebar bg-white-2">
    <div class="menu">
      <ul class="menu scrollbar">
        <li>
          <span class="name">Home</span>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#" class="current">About</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <!-- website content -->
  <div class="content">
    <nav class="navbar navbar-expand-lg fixed-top bg-white-2">
      <a class="navbar-brand navbar-title" href="#">Sidebar Menu</a>
      <span class="navbar-text">
        <a href="#" id="sidebar" class="bars">
          <i class="fa fa-bars" aria-hidden="true"></i>
        </a>
      </span>
    </nav>
    <div class="container-fluid">
      Main Content Here
    </div>
  </div>
  
</div>

5. To use the dark theme, just replace the bg-white class with bg-dark.

<div class="sidebar bg-dark-menu">
  ...
</div>

<nav class="navbar navbar-expand-lg fixed-top bg-dark-navbar">
  ...
</nav>

Changelog:

v1.3.2 (2019-05-03)

• Fix toggle jump

v1.3.1 (2019-04-17)

• Update width for icons

v1.3.0 (2019-04-09)

• CSS update

v1.2.4 (2019-03-08)

• JS & CSS update

2019-03-04

• JS update

2019-02-26

• JS update

2019-02-22

• CSS update

---

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