Drawer Style Navigation For Bootstrap 4 - Bootstrap-Drawer

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.

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
  
});

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

  • Publication date: 15.05.2019
  • Source