Offcanvas

@summonware/ui · offcanvas · P1 · Core UI

Usage

A panel that slides in from the side for secondary work that should not take over the page — filters, a detail preview, mobile navigation. Unlike Modal it stays mounted when closed and uses `inert` to remove itself from the tab order, so the panel animates properly and its form state survives being dismissed.
import { Offcanvas } from '@summonware/ui';

Best practices

DoUse it for filters over a list the user wants to keep seeing. That is its advantage over a modal.
DoOpen from the side the trigger is on — `left` for navigation, `right` for contextual detail.
Don'tUse it for a decision that blocks progress. That interruption belongs in a Modal.
Don'tAssume unmounting on close. Contents persist, which is usually what you want but will surprise you if you expect a reset.

Examples

Common configurations, variations and states.

Filter panel

Filters in a right-hand panel, so the list they apply to stays on screen behind them.

Reference variants

2 of 3 labels from the reference are demonstrated above.