Off-Canvas

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.

offcanvas.init();
<div class="oc-wrap">
  <section class="oc-content">
    <div class="oc-inner">
      ...
    </div>
  </section>
  <aside class="oc-aside oc-aside-id">
    ...
  </aside>
</div>
<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.

Options

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

.init()

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

.destroy()

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

offcanvas.destroy()