Offcanvas

Offcanvas makes it look like a menu is sliding from the outside of the page. This may be useful in many different cases, one of them being when you need to save space on screen and don't have to display sidebar at all times.

Demo

This feature is very easy to set up. It is based on data-component set to offcanvas, data-target set to the menu layer (#offcanvas-right in example below) and a feature-specific data-direction which is required for right menu to be set to right.

Open Left Open Right

// Left
<a href="#" data-component="offcanvas" data-target="#offcanvas-left">Open Left</a>

<div id="offcanvas-left" class="hide">
<nav>
<ul>
<li>...</li>
</ul>
</nav>
</div>

// Right + Close
<a href="#" data-component="offcanvas" data-target="#offcanvas-right" data-direction="right">Open Right</a>

<div id="offcanvas-right" class="hide">
<a href="#" class="close"></a>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
</div>

Settings

target
  • Type: string
  • Default: null

Sets ID selector of an element that will slide from the side.

push
  • Type: boolean
  • Default: true
direction
  • Type: string
  • Default: 'left'

The direction in which page will shift to give way for the sidebar menu. Default is left and is not required for left-side navigation, however, right value must be set for the right-side menu to work.

clickOutside
  • Type: boolean
  • Default: true

Unless set to false, clicking anywhere on a page will make side menu to close.

width
  • Type: string
  • Default: '250px'

Sidebar width in pixels.

animation
  • Type: boolean
  • Default: true

Setting this to false turns off opening and closing animation.

Callbacks

open
$('#my-offcanvas').on('open.offcanvas', function()
{
    // do something...
});
opened
$('#my-offcanvas').on('opened.offcanvas', function()
{
    // do something...
});
close
$('#my-offcanvas').on('close.offcanvas', function()
{
    // do something...
});
closed
$('#my-offcanvas').on('closed.offcanvas', function()
{
    // do something...
});