node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


onoffcanvas NPM version NPM monthly downloads NPM total downloads

An offcanvas plugin

Getting started


Install with npm:

$ npm install --save onoffcanvas

Install with bower

$ bower install onokumus/onoffcanvas --save


download from github


  1. Include onoffcanvas StyleSheet
<link rel="stylesheet" href="">
  1. Include onoffcanvas plugin's code
<script src=""></script>
  1. Add class onoffcanvas and id attribute to div tag.
<div class="onoffcanvas" id="side-canvas"></div>
  1. Add trigger button: Be sure to add data-toggle="onoffcanvas".
<button data-toggle="onoffcanvas" data-target="#side-canvas">SIDE MENU</div>

Canvas Options

  1. Position Options : onoffcanvas is in absolute position by default
  • add class is-fixed to fixed position
<div class="onoffcanvas is-fixed"></div>
  1. Direction Options : onoffcanvas is in full-screen by default
  • is-top
  • is-right
  • is-bottom,
  • is-left
  • is-center only vertical
<div class="onoffcanvas is-{top|right|bottom|left|center}" id="side-canvas"></div>
  1. Opened/Closed Options : onoffcanvas is closed by default
  • add class is-open to open.
<div class="onoffcanvas is-open" id="side-canvas"></div>
  1. Hoverable Options :
  • add class onoffcanvas-container to parent element
  • add class is-hoverable to onoffcanvas
<div class="onoffcanvas-container">
    <div class="onoffcanvas is-hoverable" id="side-canvas"></div>

Trigger Options

  • Type

    1. link with href
    <a href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</a>
    1. button with data-target
    <button data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false">toggle onoffcanvas</button>
  • Style

    if you want to use the default style for onoffcanvas, add class onoffcanvas-toggler

    <a class="onoffcanvas-toggler" href="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false"></a>


    <button class="onoffcanvas-toggler" data-target="#side-canvas" data-toggle="onoffcanvas" aria-expanded="false"></button>




Copyright © 2017, onokumus. Released under the MIT License.

This file was generated by verb-generate-readme, v0.5.0, on May 17, 2017.