Responsive Sidebar Navigation Skeleton With Bootstrap

Responsive Sidebar Navigation Skeleton With Bootstrap
File Size: 65 KB
Views Total: 1592
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A minimal responsive Sidebar Navigation Skeleton that automatically collapses itself into an off-canvas hamburger navigation on mobile devices.

Based on jQuery library and Bootstrap 4 framework. Well-suited for dashboards (admin panels) and documentation websites.

How to use it:

1. Load the necessary jQuery and Bootstrap 4 in your HTML document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the Sidebar skeleton's JavaScript and CSS files in the document.

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

3. Add the sidebar nav toggle to the navbar.

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <!-- title -->
    <a class="navbar-brand" href="#">Sidebar navigation</a>
    <!-- sidebar toggle -->
    <button class="navbar-toggler btn btn-link border-0" type="button" id="sidebar" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</header>

4. Add the sidebar navigation to the main content of your webpage.

<div class="d-flex wrapper wrapper-navbar-used wrapper-navbar-fixed">
  <nav role="navigation" class="sidebar sidebar-bg-light" id="navigation">
    <!-- sidebar navigation -->
    <div class="sidebar-menu">
      <div class="sidebar-menu-fixed">
        Menu Items Here
      </div>
    </div>
  </nav>
  <div class="container-fluid">
    <!-- content -->
    <main role="main"></main>
  </div>
</div>

5. Customize the background color of the sidebar navigation with the following CSS classes:

  • .sidebar-bg-white
  • .sidebar-bg-light
  • .sidebar-bg-dark 
  • .sidebar-bg-blue
  • .sidebar-bg-purple
  • .sidebar-bg-pink
  • .sidebar-bg-red
  • .sidebar-bg-orange
  • .sidebar-bg-green
  • .sidebar-bg-teal
  • .sidebar-bg-cyan
<nav role="navigation" class="sidebar sidebar-bg-dark" id="navigation">
  <!-- sidebar navigation -->
  <div class="sidebar-menu">
    <div class="sidebar-menu-fixed">
      Menu Items Here
    </div>
  </div>
</nav>

Changelog:

2021-05-12

  • bugfix

v1.0.18 (02/24/2021)


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