Skip to main content

Overlays and menus

Drawer

Render a slide-in side panel for contextual controls. A smooth operator that enters stage left (or right, or top, or bottom).

Curated demo

Filters

Reference

Render a slide-in side panel for contextual controls. A smooth operator that enters stage left (or right, or top, or bottom).

  • Use Drawer when content is supporting rather than blocking. It slides in politely like a butler offering hors d'oeuvres.
  • Keep trigger state and orchestration consumer-owned.
  • Great for filters, navigation menus, and auxiliary tools.

Example snippet

<Drawer open title="Filters" position="right">
  <p>Refine the results.</p>
</Drawer>