jQuery Plugin For Off-canvas Bootstrap Navigation

jQuery Plugin For Off-canvas Bootstrap Navigation
File Size: 687 KB
Views Total: 4505
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

An ultra-light jQuery extension for Bootstrap that helps you create an user-friendly off-canvas push menu from the default Bootstrap navbar component in mobile view.

How to use it:

1. Make sure you have jQuery library and Bootstrap framework installed in your project.

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

2. Include the Bootstrap Off-Canvas Nav plugin's JavaScript and Stylesheet in the project.

<link href="bootstrap-off-canvas-nav.css" rel="stylesheet">
<script src="bootstrap-off-canvas-nav.js"></script>

3. That's it. Add the CSS class off-canvas-nav-left to your body tag to create an off-canvas push menu from your regular Bootstrap navbar that slides out from the left side of the screen when toggled.

<body class="off-canvas-nav-left">

Change log:


  • Make nav width dynamic when screen width <= 375px


  • Fix navbar-toggle for left-side off-canvas nav


  • Safari fix

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