The off-canvas component allows for the use of the .off-canvas and modifier classes for off-canvas behavior. This component can be used by initiating the off-canvas JavaScript by running the init() method.

<div class="oc-wrap">
  <section class="oc-content">
    <div class="oc-inner">
  <aside class="oc-aside oc-aside-id">
<button class="oc-trigger" data-target="oc-aside-id">Menu</button>

For more information on how to use and customize the off-canvas markup and styles, take a look at the off-canvas block documentation.


When initiating the off-canvas component, you can pass in the following options to override defaults.

Parameter Type Default Description
classTrigger String 'oc-trigger' Class name for off-canvas trigger
classWrap String 'oc-wrap' Class name for off-canvas wrapper
classAside String 'oc-aside' Class name for off-canvas aside
classActive String 'oc-active' Class name for active state
classDelay String 'oc-delay' Class name for off-canvas delay class
timer Milliseconds 500 The length of delay before removing the delay class


Initializes the off-canvas component using either default settings or custom options passed in.

offcanvas.init( options )
Parameter Type Description
options JSON Custom options for component


Destroys the off-canvas component by removing event listeners and clearing the settings variable.


© 2018 . All rights reserved.