Offcanvas
A slide-in panel — used for mobile navigation, filter drawers, or any
content that should sit off-screen until triggered. Supports two open
modes: a standard panel (slides in from an edge) or a popup (opened by
a selector, e.g. a custom trigger element elsewhere on the page).
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
ariaLabel | string | "Offcanvas" | Accessible name for the panel. |
backdrop | boolean | true | Shows a dimmed backdrop behind the panel while open. |
panel group | |||
panel.showInTheEditor | boolean | true | Keeps the panel visible while editing in Etch. |
panel.width | string | "380px" | Panel width. |
panel.separated | boolean | true | Adds visual separation from the edge (e.g. margin/shadow) instead of a flush edge-to-edge panel. |
panel.position | select | "right" | Which edge the panel slides in from. |
panel.entry | select | "default" | Entry animation style. |
panel.heightAuto | boolean | false | Panel height sizes to its content instead of filling the viewport. |
(shown when panel.heightAuto is on) | condition | ||
panel.bottom | boolean | false | Anchors the auto-height panel to the bottom instead of the top. |
popup group | |||
popup.openWithSelector | boolean | false | Opens the panel from an arbitrary trigger elsewhere on the page instead of the default trigger. |
(shown when popup.openWithSelector is on) | condition | ||
popup.selector | string | — | CSS selector of the custom trigger element. |
popup.hideTrigger | boolean | true | Hides the component's own default trigger when using a custom selector. |
A companion component, Fancy offcanvas Close, provides the dismiss button/icon used inside the panel.
Note
This page covers the component's current props. A full walkthrough — like the one on Accordion — is coming as this component gets re-verified in an active conversion.