Drawer

Overview

Side-anchored overlay panel for supplementary content without leaving the current page.

Showing detail or edit forms alongside a list or table where the user needs to stay in context.
Navigation trees, filter panels, or settings that the user may want to keep open while interacting with the page.
Secondary workflows that complement the current view rather than replacing it.

Full-screen workflows that require the user's full attention — use a Modal or navigate to a new page.
Mobile-style bottom sheets — use Sheet for the bottom-anchored variant.
Brief contextual explanations or single-action prompts — use a Popover instead.

Modal — blocking full-attention overlay when the user cannot continue without acting.
Sheet — bottom-anchored overlay optimised for mobile interactions.
Sidebar — persistent side panel that is always visible (not overlaid).

<script lang="ts">
  import Drawer from '@lostgradient/cinder/drawer';
</script>

<Drawer />

Live preview

Use when

Showing supplementary navigation, filters, or settings that should slide in from a page edge.
Presenting long-form content that benefits from a side panel without leaving the current view.

Avoid when

Interrupting the user for a focused decision — use modal so the surface is centered and task-scoped.
Anchoring a small surface to a trigger — use popover or sheet instead.

An edge-anchored slide-in panel with controls for side, size, and triggerRef.

A side drawer with a scrollable body.

Props for drawer
Name	Type	Default	Required	Bindable	Description
`open`	`boolean`	`false`		bind	Whether the drawer is open. Bindable via `bind:open`.
`side`	`'left' \| 'right'`	`'right'`			Edge the drawer slides in from. Default `right`.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`			Drawer width token. Default `md`.
`title`	`text`		req		Accessible name for the drawer. Required for screen-reader labelling. Rendered as a visible `<h2>` in the default header. When a custom `header` snippet is provided without `ariaLabelledBy`, this text is rendered in a visually-hidden `<h2>` as the accessible name fallback.
`triggerRef`	`HTMLElement \| null`	`null`			Optional reference to the element that opened the drawer. When supplied, focus returns to this element on close. When omitted, focus restores to the element that held focus before the drawer opened.
`ariaLabelledBy`	`text`				Optional id of an element that names the drawer. When supplied, drawer wires `aria-labelledby` to this id and renders no internal heading. Use this when a custom `header` snippet has its own visible heading — supply `ariaLabelledBy` pointing to that heading's id so the visible and accessible names stay in sync.
`header`	`snippet`				Custom header. Falls back to a default header that renders `title`.
`children`	`snippet`		req		Drawer body content. Required.
`footer`	`snippet`				Optional footer (e.g. action buttons).