Flexible Accessible Off-canvas Panel Plugin For jQuery - js-offcanvas

File Size: 75.2 KB
Views Total: 9615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flexible Accessible Off-canvas Panel Plugin For jQuery - js-offcanvas

A lightweight, flexible jQuery off-canvas navigation plugin which lets you create fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes.

Fully compatible with the latest Bootstrap 4 framework.

How to use it:

1. Add the latest version of jQuery library and other required resources to the webpage.

<link rel="stylesheet" href="js-offcanvas.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js-offcanvas.pkgd.js"></script>

2. Create the off-canvas panel following the html structure like this:

<aside class="js-offcanvas" id="left" role="complementary">

3. Create a trigger link and insert it together with the main content into a container named 'c-offcanvas-content-wrap'.

<main class="c-offcanvas-content-wrap" role="main">
  <a class="js-offcanvas-trigger" data-offcanvas-trigger="left" href="#left">Left</a>

4. You can pass the plugin's options to the off-canvas panels like this:

<a class="js-offcanvas-trigger" data-offcanvas-trigger="left" href="#left">Left</a>

5. All available options and callbacks which can be passed via data-offcanvas-options attribute.


  // aria role
  role: "dialog",

  // default classes
  modifiers: "left,overlay",
  baseClass: "c-offcanvas",
  modalClass: "c-offcanvas-bg",
  contentClass: "c-offcanvas-content-wrap",
  closeButtonClass: "js-offcanvas-close",
  bodyModifierClass: "has-offcanvas",
  supportNoTransitionsClass: "support-no-transitions",

  // enable resize event
  resize: true,

  // target element
  target: null,

  // model mode
  modal: true,

  // callback functions
  onOpen: null,
  onClose: null,
  onInit: null

6. API methods.

var dataOffcanvas = $('#off-canvas').data('offcanvas-component');

// opens the off-canvas menu

// closes the off-canvas menu

// toggles the off-canvas menu

7. Event handlers

// before create$( document ).on( "beforecreate.offcanvas", function( e ){
  var dataOffcanvas = $( e.target ).data('offcanvas-component');
  dataOffcanvas.onInit =  function() {

// after create
$( document ).on( "create.offcanvas", function( e ){ } );

// when open
$( document ).on( "open.offcanvas", function( e ){ } );

// when closed
$( document ).on( "close.offcanvas", function( e ){ } );

// when the window resizes
$( document ).on( "resizing.offcanvas", function( e ){ } );

// when the trigger is clicked
$( document ).on( "clicked.offcanvas-trigger", function( e ){
    var dataBtnText = $( e.target ).text();
    console.log(e.type + '.' + e.namespace + ': ' + dataBtnText);



  • Set correct aria-state on open/close


  • Bugfix


  • Bugfix


  • v1.2.9: Fixed problem with CSS modifier class


  • v1.2.8: Fade out background when closing


  • v1.2.7: Added destroy method.


  • Fixed Uncaught TypeError: Cannot read property 'activeElement' of undefined.
  • Fixed w.document is always null.


  • Fixed Auto closes when textbox in offcanvas panel on android.


  • version update - scrollable


  • fixed dependencies.


  • added missing options

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