Drawer Style Navigation For Bootstrap 4 - Bootstrap-Drawer

A jQuery plugin for Bootstrap 4 that helps developers to create mobile-friendly, drawer(off-canvas) style side navigation on the Bootstrap 4 project.

Not only navigation menus, you can put any elements in the sliding drawer such as toolbar, shopping cart, search box and much more.

How to use it:

1. Add the Bootstrap Drawer plugin's files to your Bootstrap project.

<!-- Stylesheet -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-drawer.css">

<!-- JavaScript -->
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/popper.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-drawer.js"></script>

2. Insert your own content to the drawer.

<div class="drawer drawer-left slide" tabindex="-1" role="dialog" aria-labelledby="drawer-demo-title" aria-hidden="true" id="drawer-demo">
  <div class="drawer-content drawer-content-scrollable" role="document">
      <div class="drawer-header">
        <h4 class="drawer-title" id="drawer-demo-title">Drawer Header</h4>
      </div>
      <div class="drawer-body">
        <p>Drawer Body</p>
        <button type="button" class="btn btn-secondary btn-block" data-dismiss="drawer" aria-label="Close">
          Close Button
        </button>
      </div>
      <div class="drawer-footer">Drawer footer</div>
  </div>
</div>

3. By default the drawer will slide out from the left of the webpage. To change the position just replace the drawer-left with drawer-right

<div class="drawer drawer-right slide" tabindex="-1" role="dialog" aria-labelledby="drawer-demo-title" aria-hidden="true" id="drawer-demo">
  ...
</div>

4. To disable the slide animation, just remove the slide class:

<div class="drawer drawer-right" tabindex="-1" role="dialog" aria-labelledby="drawer-demo-title" aria-hidden="true" id="drawer-demo">
  ...
</div>

5. Create a trigger element to toggle the drawer. In this example we will automatically initialize this plugin using the data attributes:

<button type="button" class="btn btn-primary" data-toggle="drawer" data-target="#drawer-demo">
  Open
</button>

6. You can also initialize the drawer manually by calling the plugin on the drawer container.

$('#drawer-demo').drawer();

7. Determine whether to show the background overlay when the drawer is toggled. Default: true.

$('#drawer-demo').drawer({

  // static: dont close the drawer on click
  backdrop: 'static'
  
});

8. Enable/disable the ESC key to close the drawer. Default: true (enable).

$('#drawer-demo').drawer({

  keyboard: false
  
});

9. Determine whether to put the focus on the drawer when init. Default: true.

$('#drawer-demo').drawer({

  focus: false
  
});

10. Determine whether to show the drawer when init. Default: true.

$('#drawer-demo').drawer({

  show: false
  
});

Changelog:

2019-05-15

• Fix drawer on using shadow

---

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