Drawer host

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import

Load @prepared911/ui/styles.css once at the document root. The host has no stylesheet of its own.

DrawerHost

Name	Required	Description
`drawers`	yes	Drawers the host can show. Each has `id`, `title`, and `content`.
`closeLabel`	yes	Accessible name of the close control.
`open`	with `drawerId`	Whether the drawer is shown. Omit when `store` is set.
`drawerId`	with `open`	Id to show. `null` shows nothing.
`onOpenChange`	with `open`	Requested open state and cancelable details.
`store`	instead of `open`	Store from `createDrawerHostStore`.
`trigger`	no	One Button that opens the drawer.
`onExitComplete`	no	Called once when the close animation has finished.

Drawer entry

Name	Description
`id`	Value the shell stores as `drawerId`.
`title`	Header heading and accessible name.
`content`	Scrolling body.
`edge`	`DrawerEdge`. Default `InlineEnd`.
`size`	`DrawerSize`. Default `Medium`.
`placement`	`DrawerPlacement`. Default `Viewport`, which stacks at `--z-overlay`, below every top-layer surface.
`resizeLabel`	Names the resize handle. Omit it for a fixed size.
`scrollRegionLabel`	Name of the body scroll region.
`nav`	`{ label, items, value?, defaultValue?, onValueChange? }`.

createDrawerHostStore

createDrawerHostStore({ open?, drawerId? }) returns { getState, subscribe, open(id), close }. close leaves the id set so the panel can finish closing. open(id) replaces the drawer that is open.

Migration notes

Old	New
`DrawerPortal`	Do not mount a portal node. Drawer mounts through Portal into the trigger's document.
`useDrawerStore` / `setDrawerOpen`	`open` and `onOpenChange`, or `store.open` / `store.close`.
`AppDrawer` / `useAppDrawerStore`	`DrawerHost` and the shell's id.
`AnchorPosition.Right` / `Left`	`DrawerEdge.InlineEnd` / `InlineStart`.
`width`, `minWidth`, `maxWidth`	`DrawerSize.Medium`, `Small`, `Large`.
`DrawerNav` children	`nav` on the drawer entry.
`closeTitle`	`closeLabel`.
`onClose`	`onOpenChange` when `open` is false.

The shell's drawer search param stays shell-owned. This host does not read it.

Drawer host / Usage

Drawer host / Accessibility

On this page

Import

DrawerHost

Drawer entry

createDrawerHostStore

Migration notes

Drawer host

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import

Load @prepared911/ui/styles.css once at the document root. The host has no stylesheet of its own.

DrawerHost

Name	Required	Description
`drawers`	yes	Drawers the host can show. Each has `id`, `title`, and `content`.
`closeLabel`	yes	Accessible name of the close control.
`open`	with `drawerId`	Whether the drawer is shown. Omit when `store` is set.
`drawerId`	with `open`	Id to show. `null` shows nothing.
`onOpenChange`	with `open`	Requested open state and cancelable details.
`store`	instead of `open`	Store from `createDrawerHostStore`.
`trigger`	no	One Button that opens the drawer.
`onExitComplete`	no	Called once when the close animation has finished.

Drawer entry

Name	Description
`id`	Value the shell stores as `drawerId`.
`title`	Header heading and accessible name.
`content`	Scrolling body.
`edge`	`DrawerEdge`. Default `InlineEnd`.
`size`	`DrawerSize`. Default `Medium`.
`placement`	`DrawerPlacement`. Default `Viewport`, which stacks at `--z-overlay`, below every top-layer surface.
`resizeLabel`	Names the resize handle. Omit it for a fixed size.
`scrollRegionLabel`	Name of the body scroll region.
`nav`	`{ label, items, value?, defaultValue?, onValueChange? }`.

createDrawerHostStore

Migration notes

Old	New
`DrawerPortal`	Do not mount a portal node. Drawer mounts through Portal into the trigger's document.
`useDrawerStore` / `setDrawerOpen`	`open` and `onOpenChange`, or `store.open` / `store.close`.
`AppDrawer` / `useAppDrawerStore`	`DrawerHost` and the shell's id.
`AnchorPosition.Right` / `Left`	`DrawerEdge.InlineEnd` / `InlineStart`.
`width`, `minWidth`, `maxWidth`	`DrawerSize.Medium`, `Small`, `Large`.
`DrawerNav` children	`nav` on the drawer entry.
`closeTitle`	`closeLabel`.
`onClose`	`onOpenChange` when `open` is false.

The shell's drawer search param stays shell-owned. This host does not read it.

Drawer host / Usage

Drawer host / Accessibility

On this page

Import

DrawerHost

Drawer entry

createDrawerHostStore

Migration notes