🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Bootstrap off-canvas-menu push-menu

Documentation

Bootstrap Off-Canvas Nav

Super simple, super easy off-canvas nav for Bootstrap, requiring no additional markup to default Bootstrap navbar semantics.

Features

  • compatible with fixed and static navbars
  • compatible with dropdowns
  • slide animation
  • animated navbar-toggle button
  • closes when escape key is pressed

Installation

Add bootstrap-off-canvas-nav.css from the src folder to your HTML document after your bootstrap.css:

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

Add bootstrap-off-canvas-nav.js from the src folder to your HTML document after your jquery.js and bootstrap.js:

<script src="bootstrap-off-canvas-nav.js"></script>

That's it!

Options

For a left-side off-canvas nav, add off-canvas-nav-left class to your <body> tag:

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

Examples

See the test folder for more information.


You May Also Like