Drawer

import { Drawer } from '@yarcl/react';

<Drawer side="left" trigger={<Button>Menu</Button>} title="Navigation">
  <Stack as="nav">…</Stack>
</Drawer>

<Drawer trigger={<Button>Filters</Button>} title="Filters" footer={<Button>Apply</Button>}>
  …
</Drawer>

Same behavior as Dialog. The drawer fills the screen height; its body scrolls while the header and footer stay in place.

Floating controls such as Select, Combobox and Menu stay interactive inside the drawer. Their panels can extend beyond its body, and Esc dismisses an open popup before closing the drawer. This also applies to AppLayout’s mobile navigation.

Sizes

size sets the width, from the same modalSizes as dialogs. Drawers are usually narrower than dialogs, so the library defaults set a component default:

components: { Drawer: { size: 'sm' } }

<Drawer size="lg" title="Order details">…</Drawer>

Part styles

Style the native root and its header, body and footer through component parts. They expose data-part="root", "header", "body" and "footer", following the same content rules as Dialog.

Props

Prop	Type	Default	Description
`title` required	`ReactNode`		Heading of the dialog. Also its accessible name.
`children`	`ReactNode`		Body content. Scrolls when it doesn't fit.
`closeLabel`	`string`	`config.labels.close`	Accessible name of the close button.
`closeOnBackdrop`	`boolean`	`true`	Closes when the backdrop is clicked.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.
`description`	`ReactNode`		Supporting text below the title. Also its accessible description.
`footer`	`ReactNode`		Actions shown at the bottom, e.g. Cancel and Confirm buttons.
`onOpenChange`	`(open: boolean) => void`		Called when the dialog opens or closes, including by Esc, the close button or a backdrop click.
`open`	`boolean`		Controlled open state.
`side`	`'left' \| 'right'`	`'right'`	Edge the drawer is attached to.
`size`	`ModalSize`config	config.defaults.modalSize (Drawer: its component default, `sm` in the library defaults)	Width, from the `modalSizes` config. Height follows the content, up to the viewport.
`trigger`	`ReactElement<{ onClick?: (event: MouseEvent) => void }, string \| JSXElementConstructor<any>>`		An element that opens the dialog when clicked, e.g. a Button. Optional when controlled.