Mobile-friendly Off-canvas Nav Template For Bootstrap

A responsive, mobile-friendly, off-canvas sidebar navigation system designed for dashboard & admin panel, built with JavaScript (jQuery), CSS/CSS3, and Bootstrap framework.

The off-canvas sidebar nav will be auto hidden on small devices (e.g. mobile & tablet) and can be revealed again by tapping the toggle button.

How to use it:

1. Load the necessary stylesheet simple-sidebar.css in the Bootstrap page.

<!-- Bootstrap core CSS -->
<link href="/path/to/bootstrap.min.css" rel="stylesheet" />
<!-- Off-canvas Nav Template -->
<link href="/path/to/simple-sidebar.css" rel="stylesheet" />
<!-- Bootstrap core JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.bundle.min.js"></script>

2. Insert the off-canvas nav together the toggle button and main content into the web page.

<div class="d-flex" id="wrapper">
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading">Nav</div>
    <div class="list-group list-group-flush">
      <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Shortcuts</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
      <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
    </div>
  </div>
  <!-- Page Content -->
  <div id="page-content-wrapper">
    <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
    ... main content here ...
  </div>
</div>

3. The main JavaScript (jQuery) to enable the menu toggle button. That's it.

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

---

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