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

Sidebar Push Navigation With jQuery And Bootstrap 4 - sidebar-menu
File Size: 76.3 KB
Views Total: 13083
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="">
<script src="" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="" 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/">
<script src="js/"></script>

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

<link rel="stylesheet" href="css/">
<link rel="stylesheet" href="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">
          <span class="name">Home</span>
            <li><a href="#">Contact</a></li>
            <li><a href="#" class="current">About</a></li>

  <!-- 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>
    <div class="container-fluid">
      Main Content Here

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

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

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


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


  • JS update


  • JS update


  • CSS update

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