Drawer

Overview

Drawer is a modal overlay that slides in from an edge of the viewport. It captures focus and provides an overlay backdrop. Use it for navigation menus, detail panels, filters, and settings forms that benefit from side-panel UX.

Usage

<Drawer side="right">
  <Drawer.Trigger>Open Menu</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Title>Menu</Drawer.Title>
    <Drawer.Description>Navigation links</Drawer.Description>
    <nav>...</nav>
    <Drawer.Close>×</Drawer.Close>
  </Drawer.Content>
</Drawer>

Sides

<Drawer side="left">...</Drawer>
<Drawer side="right">...</Drawer>
<Drawer side="top">...</Drawer>
<Drawer side="bottom">...</Drawer>

Controlled

const [open, setOpen] = useState(false);

<Drawer open={open} onOpenChange={setOpen} side="right">
  <Drawer.Content>
    <Drawer.Title>Settings</Drawer.Title>
    <form onSubmit={() => setOpen(false)}>...</form>
  </Drawer.Content>
</Drawer>

Accessibility

Keyboard Interactions

ARIA

• Content has role="dialog" and aria-modal="true"
• Drawer.Title provides aria-labelledby
• Drawer.Description provides aria-describedby
• Focus is trapped and returns to trigger on close

API Reference

AI Decision Guide

Use Drawer when:

• Mobile navigation menus
• Detail panels alongside primary content
• Filter/settings forms that shouldn't leave the page context
• Multi-step forms on narrow viewports

Don't use Drawer when:

• Content needs centered attention → use Dialog
• Content is a brief label → use Tooltip or Popover
• User should not be blocked → use Popover (non-modal)

Related Components