Loading navigation…
User
API and Development
Load Drawer's styles.css as well. The host has no stylesheet of its own.
| 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. |
| 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. |
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({ 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.
| 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.