Drawer
An off-canvas panel for navigation or filters. It is one <dialog>: below the staticFrom breakpoint it opens as a modal; from that breakpoint the CSS shows it as a static panel and the trigger can be hidden. Crossing the breakpoint with the modal open closes it.
<a class="iv-button iv-button--secondary iv-u-lg-hidden" href="#site-drawer" data-iv-open="site-drawer">Open navigation</a>
<aside aria-label="Site navigation">
<dialog class="iv-drawer" id="site-drawer" data-iv-component="drawer" aria-label="Site navigation">
<div class="iv-drawer__panel">
<header class="iv-drawer__header">
<h2 class="iv-drawer__title">Sections</h2>
<button class="iv-button iv-button--ghost iv-button--icon iv-u-lg-hidden" type="button" data-iv-close aria-label="Close">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>
</header>
<div class="iv-drawer__body">
<nav class="iv-stack iv-u-gap-2" aria-label="Sections">
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Overview</a>
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Components</a>
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Tokens</a>
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Accessibility</a>
</nav>
</div>
<footer class="iv-drawer__footer">
<a class="iv-button iv-button--ghost iv-button--sm iv-u-lg-hidden" href="#" data-iv-close>Close</a>
</footer>
</div>
</dialog>
</aside>
<p id="drawer-note" class="iv-u-text-sm iv-u-text-muted">Demo: below the lg breakpoint the drawer opens as a modal; from lg it is a static panel, so the opening and closing controls are hidden instead of left with nothing to do. Every row leads back to this note, not to a real page. The panel lives in an <code><aside></code>, which is how the component is told that becoming static from a breakpoint upwards is intended.</p>// data-iv-component="drawer"
{
open: "site-drawer",
close: true,
}Options
| Option | Attribute | Default |
|---|---|---|
placement | data-iv-placement | start (end slides from the end edge) |
staticFrom | data-iv-static-from | lg (none keeps it modal at every size) |
closeOnBackdrop, closeOnEscape, returnFocus | as Dialog | true |
Methods and events are the same as Dialog; a close caused by resizing reports reason: "viewport".
Without JavaScript
From the static breakpoint the panel is simply visible. On small screens the trigger link targets the drawer id and :target shows it as a static block.
Class index
Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.
| Class | What it does |
|---|---|
iv-drawer__header | Top band of the panel: title and close button. |
iv-drawer__title | Title of the drawer; it labels the dialog. |
iv-drawer__body | Scrollable region of the panel. |
iv-drawer__footer | Bottom band, for the actions. |