Back to Docs
UX Pattern

Recipe Drawer

A slide-out panel for viewing recipe details without leaving the current context. Keeps users anchored while exploring.

Recipe List
Spicy Ramen
Miso Soup
Pad Thai
Spicy Ramen

Behavior

  • Slides in from the right edge
  • Backdrop scrim dims the list
  • Swipe or tap scrim to dismiss
  • Preserves scroll position on close

Implementation

  • CSS transform + opacity transition
  • Portal to document body
  • Focus trap inside drawer
  • Escape key dismisses