Drawer
A modal panel that slides in from an edge of the screen, for navigation, filters or details.Navigation drawer
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Button, Drawer } from '@advui/core'
<Drawer>
<Drawer.Trigger asChild>
<Button variant="outline">Filters</Button>
</Drawer.Trigger>
<Drawer.Content side="right">
<Drawer.Header>
<Drawer.Title>Filters</Drawer.Title>
<Drawer.Description>Narrow the product list.</Drawer.Description>
</Drawer.Header>
<Drawer.Body>…</Drawer.Body>
<Drawer.Footer>
<Drawer.Close asChild>
<Button variant="outline">Cancel</Button>
</Drawer.Close>
<Button>Apply</Button>
</Drawer.Footer>
</Drawer.Content>
</Drawer>Examples
Filters
From the right, with a scrolling body and footer actions.Preview
Code
API reference
Drawer
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Open state, when you control it. |
defaultOpen | boolean | false | Open at first, when the drawer manages its state. |
onOpenChange | (open: boolean) => void | — | Called when opened or closed. |
Drawer.Trigger
Opens the drawer. Use `asChild` to render your Button.Drawer.Content
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Edge the drawer is attached to. |
size | 'sm' | 'md' | 'lg' | 'md' | Width of a left or right drawer ($72, $96, $128), up to 85% of the screen. |
hideCloseButton | boolean | false | Hide the × button. |
Drawer.Body
Scrolls long content between the header and the footer.Drawer.Header
Stacks the title and description at the top.Drawer.Footer
A row of actions at the bottom.Drawer.Title
Names the drawer for screen readers.Drawer.Description
Describes the drawer; read with the title.Drawer.Close
Closes the drawer. Use `asChild` to render your Button.| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | Wrap your own Button. |
Accessibility
role="dialog"+aria-modal, labelled byDrawer.Titleand described byDrawer.Description.- Focus moves into the drawer on open, is trapped while open, and returns to the trigger on close.
- Escape, the overlay and the × button (labelled “Close”) close it.
- Drawer.Close keeps its child’s visible text as the accessible name.
| Key | Action |
|---|---|
| Tab / Shift+Tab | Cycles focus inside the drawer. |
| Escape | Closes the drawer. |
Responsive behavior
Left and right drawers are at most 85% of the screen width, so the page stays visible behind them; top and bottom drawers fit their content up to 85% of the height. Footer buttons stack below sm.
Platform notes
Web
Rendered in a portal with the page scroll locked. Slides in unless reduced motion is on.
iOS
Rendered in a native portal. Padding on the attached edges includes the safe-area insets passed to UniversalProvider.
Android
The hardware back button closes the drawer.