01 Getting Started

• Install with npm: npm install js-offcanvas
• Install with yarn: yarn add js-offcanvas

JS & CSS

Include the .css and .js files in your site.

<script src="js-offcanvas.pkgd.min.js"></script>
<link href="js-offcanvas.css" rel="stylesheet">

HTML

    <div class="c-offcanvas-content-wrap">
        <a href="#offCanvas" id="triggerButton">Menu</a>
         <!-- Your Main Content goes here -->
    </div>
    
    <aside id="offCanvas"></aside>

Initialize

• Initialize with JS
• Initialize with html

Initialize with JS

$('#offCanvas').offcanvas({
    modifiers: 'left, overlay', // default options
    triggerButton: '#triggerButton' // btn to open offcanvas
});

Initialize with HTML

<a  class="js-offcanvas-trigger" 
    data-offcanvas-trigger="off-canvas-id"
    href="#off-canvas">Menu</a>

<aside class="js-offcanvas" 
       data-offcanvas-options='{"modifiers": "left,overlay"}' 
       id="off-canvas-id">...</aside>

  // Trigger Enhance
   $( function(){
       $(document).trigger("enhance");
   });