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>
      </div>

  </div>
</nav>

4. Call the function on the navigation and done.

$('.navbar-nav').mdStrap();

5. Available options.

$('.navbar-nav').mdStrap({

  // 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'

});

Changelog:

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

2017-09-30

• v2.3.0

2017-04-12

• v2.1.0

2016-09-25

• Added option to enable debugging mode

2016-09-08

• Fixed mobile menu items not clickable

2016-08-16

• Fixed overlay z-index

2016-08-13

• JS update.

2016-08-10

• Added touchscreen support

2016-08-02

• Modified to work even if nav not fixed to top

2016-08-01

• CSS update

---

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