Register

Offcanvas

A panel that slides in from the side and keeps the focus (drawer)

From the start edge

Like the sidebar on a phone.

Show the code
<button type="button" class="btn" data-drawer="oc-1">
<i class="ti ti-layout-sidebar-left-expand">
</i>Open the panel</button>

As a static panel

The same panel in the page, for a filter column.

Show the code
<aside class="drawer static" aria-label="Filters">
<div class="drawer-head">
<b>Filters</b>
</div>
<div class="drawer-body stack">
<div class="field">
<label class="label" for="oc-s">Store</label>
<select class="input" id="oc-s" name="oc-s">
<option value="All stores">All stores</option>
<option value="Market Street">Market Street</option>
<option value="Riverside">Riverside</option>
<option value="Old Town">Old Town</option>
</select>
</div>
<label class="setting" for="oc-l">
<span>Only low stock</span>
<span class="choice">
<input type="checkbox" id="oc-l" name="oc-l">
<span class="switch">
</span>
</span>
</label>
</div>
</aside>