Options Accesible Offcanvas

Defaults

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-offcanvas-options attribute to the target elment.
This attribute should contain the properly formatted JSON object representing the custom options.


modifiers: "left,overlay",//default

// Custom CSS Class Names
baseClass: "c-offcanvas",
modalClass: "c-offcanvas-bg",
contentClass: "c-offcanvas-content-wrap",

closeButtonClass: "js-offcanvas-close", // btn inside the offcanvas
role: "dialog", // role="dialog"

bodyModifierClass: "has-offcanvas", // added to the body
supportNoTransitionsClass: "support-no-transitions", // c-offcanvas--support-no-transitions

resize: true, // close on resize event
target: null, // toggler-btn with data-offcanvas-trigger="{{id}}"

// Callbacks
onInit: null, // Fires an event when offcanvas is initialized.
onOpen: null, // Fires an event when offcanvas is opened.
onClose: null // Fires an event when offcanvas is closed.

Progressive enhancement

before


<a data-offcanvas-trigger="left" href="#left">Left</a>
<aside class="js-offcanvas" id="left" role="complementary"></aside>

after initialization


<a class="c-button" data-offcanvas-trigger="left" href="#left" role="button" aria-controls="left" aria-pressed="false" aria-expanded="false"><span class="c-button__text">Left</span></a>
<aside class="js-offcanvas c-offcanvas c-offcanvas--left c-offcanvas--overlay is-closed" id="left" role="dialog" tabindex="-1" aria-hidden="true"></aside>
<div class="c-offcanvas-bg c-offcanvas-bg--left c-offcanvas-bg--overlay is-closed"></div>

is-open


<!-- is-open-->
<body class="has-offcanvas--visible has-offcanvas--left has-offcanvas--overlay">
<a class="c-button is-active" data-offcanvas-trigger="left" href="#left" role="button" aria-controls="left" aria-pressed="true" aria-expanded="true"><span class="c-button__text">Left</span></a>
<aside class="js-offcanvas c-offcanvas c-offcanvas--left c-offcanvas--overlay is-open" id="left" role="dialog" tabindex="-1" aria-hidden="false"></aside>
<div class="c-offcanvas-bg c-offcanvas-bg--left c-offcanvas-bg--overlay is-open"></div>