DS0
Components

Drawer

A slide-out panel attached to an edge of the screen.

Usage


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

Sides

Supports left, right (default), top, and bottom.

Accessibility

KeyAction
EscapeCloses the drawer
TabTrapped within the drawer
  • Dialog — Centered modal overlay
  • Popover — Non-modal contextual overlay

On this page