HTML Template for Navigating off-canvas Sidebar With jQuery & Bootstrap

Simple Sidebar is an off-the-canvas sidebar navigation template for Bootstrap created by Start Bootstrap. An easy-to-configure, easy-to-navigate sidebar template built using Bootstrap framework and jQuery library.

Basic Use

After downloading, simply edit the HTML and CSS files included in the dist directory. These are the only files you have to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.

Advanced Use

Copy the theme’s source files and go to the theme’s root directory. Run npm install and then run npm start which will open a preview of the template in your default browser, see changes to core template files, and reload the browser directly when the changes are saved. You can view the package.json file to see which scripts are included.

Must Read: Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

How to make use of it:

1. Install the package and run the build.

# NPM
$ npm i startbootstrap-simple-sidebar-With-jQuery
$ npm run build

2. Import the bundled CSS into your document.

<link href="dist/css/styles.css" rel="stylesheet" />
// or import the scss
@import "startbootstrap-simple-sidebar-master/src/scss/styles.scss";

3. The HTML template for the sidebar navigation to maintain all web page content inside the #page-content-wrapper.

<div class="d-flex" id="wrapper">
  <!-- Sidebar-->
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading">Heading</div>
    <div class="list-group list-group-flush">
      <a class="list-group-item list-group-item-action bg-light" href="#!">Dashboard</a>
      <a class="list-group-item list-group-item-action bg-light" href="#!">Shortcuts</a>
      <a class="list-group-item list-group-item-action bg-light" href="#!">Overview</a>
      <a class="list-group-item list-group-item-action bg-light" href="#!">Events</a>
      <a class="list-group-item list-group-item-action bg-light" href="#!">Profile</a>
      <a class="list-group-item list-group-item-action bg-light" href="#!">Status</a>
    </div>
  </div>
  <!-- Page Content-->
  <div id="page-content-wrapper">
    <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
      <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#!">
              Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item"><a class="nav-link" href="#!">Link</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdown" href="#!" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#!">Action</a>
              <a class="dropdown-item" href="#!">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#!">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
      <h1 class="mt-4">Simple Sidebar</h1>
    </div>
  </div>
</div>

4. The jQuery script to allow the sidebar navigation.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
$("#menu-toggle").click(function (e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

See Demo And Download

Official Website(StartBootstrap): Click Here

This superior jQuery/javascript plugin is developed by StartBootstrap. For extra Advanced Usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Nepali-Date-Picker-jQuery-Plugin

Nepali Date Picker jQuery Plugin | nepaliDatePicker

Nepali Date Picker is a customizable, easy-to-use, and input-based date picker plugin mostly based on the Nepali calendar. Users can choose a Nepali date in the navigable…

Leave a Reply

Your email address will not be published. Required fields are marked *