silc offcanvas  

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.

HTML

The offcanvas pattern consists of two main elements:

$3

The open trigger must contain an anchor link that references an element on the page with a corresponding id.
``html
Trigger Offcanvas
`

$3

The content element should contain an anchor link that is self-referencing through an id for closing the offcanvas element.
`html

Close

This content is outside of the viewport.

`

Class modifiers

$3

An offcanvas element appears from the right by default, but can be modified using one of the following classes:

`html


...

...

`

Options

You can control when an element becomes offcanvas by overriding the $silc-offcanvas--options--becomes-visible variable. The default value is 800px`.

Styling

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.