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

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.

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-2">
  ...
</div>
<nav class="navbar navbar-expand-lg fixed-top bg-dark-2">
  ...
</nav>

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

  • Publication date: 21.02.2019
  • Source