The offcanvas component provides a slide in menu/panel from the l/h side

Sass Configuration:

Name Type Default Description
$offcanvas-width Number 260px Set offcanvas width
$offcanvas-mask-bg Color rgba(0,0,0,.7) Set offcanvas mask bg color
$offcanvas-content-bg Color #efefef Set offcanvas content bg color

Example Code:

<!-- Offcanvas Panel -->
<div id="offCanvas" class="offcanvas">
    <div class="offcanvas-content">
        <a class="button offCanvasToggleButton" data-toggle="offcanvas">Close</a>
        // Off canvas content in here
    </div>
</div>

<!-- Offcanvas Mask -->
<div id="offCanvasMask" class="offcanvas-mask" data-toggle="offcanvas"></div>

<!-- Container for page -->
<div id="container" class="container">
    <!-- Offcanvas toggle -->
    <a class="button offCanvasToggleButton" data-toggle="offcanvas">Close</a>
    // Page content goes in here:
</div>