Create Custom Off-canvas Bootstrap 4 Nav - bsnav

Create Custom Off-canvas Bootstrap 4 Nav - bsnav

bsnav is a jQuery & Bootstrap plugin used to override and extend the styles & behaviors of the default Bootstrap 4 navbar component.

The main goal of the plugin is to convert the default Bootstrap 4 dropdown menu into an off-canvas side menu on mobile device.

More features:

  • Custom animated toggle icons.
  • Scrollspy.
  • Sticky navbar.
  • Supports nested menu items.
  • Custom show/hide animations for the dropdown.

Basic usage:

1. Load jQuery library and Bootstrap 4 framework in the document.

<!-- Stylesheet -->
<link rel="stylesheet" href="" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- JavaScript -->
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

2. Load the bsnav plugin's JavaScript and Stylesheet in the document.

<!-- Stylesheet -->
<link rel="stylesheet" href="bsnav.min.css">
<!-- JavaScript -->
<script src="bsnav.min.js"></script>

3. Add the class 'bsnav' to the regular Bootstrap 4 navbar and done.

<div class="navbar navbar-expand-sm bsnav">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse justify-content-sm-end">
    <ul class="navbar-nav navbar-mobile mr-0">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item"><a class="nav-link" href="#">News</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>

4. Checkout the demo page for more usages.

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

  • Publication date: 14.06.2018
  • Source