jQuery Based Off-canvas Menu For Bootstrap - Bootstrap Offcanvas

File Size: 152 KB
Views Total: 32787
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Based Off-canvas Menu For Bootstrap - Bootstrap Offcanvas

Bootstrap Offcanvas is a jQuery plugin that converts default Bootstrap navbar component into an user-friendly off-canvas side menu in mobile views.

Basic usage:

1. Include Bootstrap's stylesheet and the jQuery Bootstrap Offcanvas plugin's CSS in the head section of your web page.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.offcanvas.min.css">

2. Load the jQuery Bootstrap Offcanvas plugin's script after jQuery JavaScript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/js/bootstrap.offcanvas.js"></script>

3. Create a button to toggle the off-canvas menu in mobile views.

<button type="button" 
        class="navbar-toggle offcanvas-toggle" 
  <span class="sr-only">Toggle Button</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>

4. Add the corresponding CSS classes to your Bootstrap navigation bar.

<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas">
  <div class="container-fluid">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a>
      <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;"> <span class="sr-only">Toggle navigation</span> <i class="glyphicon glyphicon-remove"></i> </button>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle">Another Link <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        <button type="submit" class="btn btn-default">Submit</button>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Another Link</a></li>

5. Events available.

  • show.bs.offcanvas: Fire before the offcanvas menu is shown
  • shown.bs.offcanvas: Fire after the offcanvas menu is shown
  • hide.bs.offcanvas: Fire before the offcanvas menu is hidden
  • hidden.bs.offcanvas: Fire after the offcanvas menu is hidden

6. Toggle event.

// toggle the offcanvas yourself

Change logs:


  • v2.5.2: Fixes page not being scrollable after resize


  • v2.4.0


  • Fixed issue with close button state not updating on resize


  • Allows only one dropdown menu to be open


  • Fixed issue with nav height


  • added 'open' event


  • added 'toggle' event


  • v2.0.1

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