The offcanvas module is an ultra-lightweight web component for the silc framework. The offcanvas module allows you to place content outside of the viewport, with the ability to trigger its visibility.
The offcanvas pattern consists of two main elements:
The open trigger must contain an anchor link that references an element on the page with a corresponding id.
<a class="silc-offcanvas__trigger" href="#silc-offcanvas-1">Trigger Offcanvas</a>The content element should contain an anchor link that is self-referencing through an id for closing the offcanvas element.
<div class="silc-offcanvas" id="silc-offcanvas-1">
<a class="silc-offcanvas__trigger silc-offcanvas__trigger--close" href="#silc-offcanvas-1">Close</a>
<p>This content is outside of the viewport.</p>
</div>An offcanvas element appears from the right by default, but can be modified using one of the following classes:
<div class="silc-offcanvas silc-offcanvas--left">...</div>
<div class="silc-offcanvas silc-offcanvas--top">...</div>
<div class="silc-offcanvas silc-offcanvas--bottom">...</div>You can control when an element becomes offcanvas by overriding the $silc-offcanvas--options--becomes-visible variable. The default value is 800px.
As with all silc components, no deliberate style has been added. However, through a SASS fallback system, a number of SASS variables are available to easily apply design without having to write your own selectors.