Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including jquery-offcanvas with all npm packages installed. Try it out:

require("jquery/package.json"); // jquery is a peer dependency. require("velocity-animate/package.json"); // velocity-animate is a peer dependency. var jqueryOffcanvas = require("jquery-offcanvas")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

jquery-offcanvas v3.4.7

Easy to use jQuery offcanvas plugin.


Travis David Dev npm

An easy to use jQuery offcanvas plugin.

This plugin provides an easy way to put content outside of the canvas and reveal it with a click on a button or any desired element. This is a useful pattern for mobile navigations and more.

Demo | Download


As this is a jQuery plugin it depends on the jQuery library v1.7+. For smooth animations Velocity.js is used. Both dependencies are required.


You can install this module either with npm or download it manually. Include jQuery, Velocity.js and the plugin before the closing body tag:

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/velocity-animate/velocity.min.js"></script>
<script src="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.js"></script>

Include the CSS file:

<link rel="stylesheet" href="node_modules/jquery-offcanvas/dist/jquery.offcanvas.min.css">

If you are not using npm just adjust the paths to match the file locations.

It's not required to have any specific markup. The plugin handles any positioning itself. The only requirement is a wrapping element around the offcanvas contents.


var $el = $("#element").offcanvas();

$(".offcanvas-trigger").on("click", function() {

Clicks on the trigger element will toggle the offcanvas element.

Do not try to initialize more than one instance of jQuery.offcanvas on one page!


Options can be set on initialization:

    origin: "right",
    duration: 400

You can also set options via data-Attributes, which will overwrite the default value and the value specified on initialization:

<div id="element" data-offcanvas-duration="200" data-offcanvas-easing="ease">


Type: object

    container: "offcanvas",
    element: "offcanvas-element",
    inner: "offcanvas-inner",
    open: "offcanvas-open",
    outer: "offcanvas-outer",
    overlay: "offcanvas-overlay"

Classes which will be applied to the elements.

If you change class names make sure to update them in the CSS file accordingly.


Type: String
Default: body

Page container, which will be animated. Expects a jQuery selector.


Type: String
Default: 220px

Width of the offcanvas element which will be revealed.

Tip: For better performance avoid using % values.


Type: number
Default: 300

Duration of the animation.


Type: String
Default: ease-in-out

Easing type for show and hide animations. You can use:

For more easing options check the Velocity.js documentation.


Type: String
Default: push

Effect used to transition the offcanvas element into the viewport. Possible values are push and slide-in-over. Check the demos for an impression of the effects.


Type: String
Default: left

Direction the offcanvas element is revealed from. Possible values are left and right.


Type: boolean
Default: false

Adds an overlay to cover the content of the page. A click anywhere on the overlay will hide the offcanvas.


Type: String
Default: rgba(0, 0, 0, 0.7)

Color of the overlay element. Best suited are rgba values to add a decent looking transparency. You can use rgba(0, 0, 0, 0.7) as starting point to play around. The overlay will be smoothly transitioned into the view.


The offcanvas API offers a couple of methods to control the offcanvas element. The methods are called like this:



Shows the offcanvas element.


Hides the offcanvas element.


Toggles the offcanvas element.


Destroys the jQuery.offcanvas instance and reverts all DOM changes.


jQuery.offcanvas fires several events. Simply listen for them with the jQuery.on function. All events are namespaced with offcanvas.

$("#element").on("shown.offcanvas", function() {
    // do stuff when offcanvas is revealed and animation is finished


Fired once the Plugin is initialized.


Fired when the show method is called.


Fired when the show animation finished.


Fired when the hide method is called.


Fired when the offcanvas gets toggled. Gets fired on both, show and hide methods. The second function argument contains the offcanvas state as boolean.

$("#element").on("toggle.offcanvas", function(event, visible) {
    console.log(visible) // outputs offcanvas state (true or false)


Fired when the hide animation finished.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free