jQuery Off-canvas Menu Plugin For Bootstrap 4 - mdstrap

File Size: 378 KB
Views Total: 9750
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Off-canvas Menu Plugin For Bootstrap 4 - mdstrap

mdstrap is a tiny jQuery plugin that makes your Bootstrap 4 navbar act as an off-canvas side menu on mobile devices.

More Features:

  • Sticks the navbar to the top or not.
  • Allows you to specify the position of the menu trigger (hamburger button).

How to use it:

1. Include jQuery library and Bootstrap v4 framework on the webpage.

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

2. Download and include the mdstrap plugin's script after jQuery.

<script src="jquery-mdstrap.js"></script>

3. Add a navigation toggle to your Bootstrap 4 navbar.

<nav class="navbar navbar-fixed-top navbar-full navbar-light">

  <div class="container-fluid">

      <!-- Navigation toggle -->
      <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">&#9776;</button>

      <div class="nav navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Features</a>
          <a class="nav-item nav-link" href="#">Pricing</a>
          <a class="nav-item nav-link" href="#">About</a>


4. Call the function on the navigation and done.


5. Available options.


  // Setting it to true allowes you to customise the appearence of the menu when scrolling.
  'fixedTop'          : true,

  // The class for the button that will trigger the menu when on mobile devices.
  'menuTrigger'       : 'navbar-toggler',

  // If fixedTop is set to true, this is required to trigger the necessary class for stylize the navbar.
  'scrollValue'       : '10'



v4.2.2/3 (2020-07-10)

  • Fixed breaking animation typo
  • Fixed bug with multiple dropdown menus showing at the same time

v4.2.1 (2020-07-03)

  • Fixed dropdown trigger

v4.2 (2020-07-02)

  • Added Bootstrap dropdown component support

v4.1 (2018-05-30)

  • Swapped FontAwesome with SVGs

v4.0.1 (2018-05-30)

  • fixed bug where plugin wouldn't work correctly on page reload
  • changed homepage URL
  • updated documentation page

v4.0.0 (2018-02-19)

  • updated Bootstrap to v4.0.0
  • moved bower dependencies to npm
  • updated package.json
  • updated .npmignore
  • updated Documentation
  • updated screenshot


  • v2.3.0


  • v2.1.0


  • Added option to enable debugging mode


  • Fixed mobile menu items not clickable


  • Fixed overlay z-index


  • JS update.


  • Added touchscreen support


  • Modified to work even if nav not fixed to top


  • CSS update

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