Code examples demonstrating different drawer variants and use cases.

Temporary Drawer

Opens on top of content, closes when clicking outside or selecting an item.

Anchor Positions

Drawers can slide in from any edge: left, right, top, or bottom.

Persistent Drawer

Sits alongside content, can be toggled open/closed, and maintains state.

Permanent Drawer

Always visible drawer pinned to the side. Ideal for desktop applications with consistent navigation.

  • Inbox

  • Starred

  • Send email

  • Drafts

  • All mail

  • Trash

  • Spam

Page content goes here