Drawers and Side Panels

Last updated:

Practical patterns for edge panels that preserve context with proper focus and dismissal.

01 — Foundation

Drawers extend the page — they are not a second app

Side panels work for secondary tasks; they fail when they become permanent mystery layers.

Drawers and side panels slide content in from the edge — filters, detail views, settings. They preserve page context better than centred modals for some tasks. They still need focus management, dismissal, and mobile behaviour thought through.

02 — When

Drawer vs dialog vs page

Choose the lightest pattern that fits the task.

  • drawers suit filters, record details, and tool panels tied to the current view
  • centred dialogs suit focused confirmations and short forms — see Modal / Dialog
  • full pages suit long forms and workflows users bookmark or share
  • avoid stacking drawer on drawer on modal — pick one overlay model

03 — Behaviour

Open, close, and focus

Users must escape predictably and return focus to where they started.

  • open from a clear trigger; label it — “Filter results”, “View details”
  • close via visible button, Escape, and optionally backdrop click for non-critical panels
  • trap focus inside while open; restore focus to the trigger on close
  • use dialog or complementary landmark patterns with appropriate roles 
<dialog aria-labelledby="filter-title">
    <h2 id="filter-title">Filter results</h2>
    <!-- form -->
    <button type="button">Close</button>
</dialog>

04 — Mobile

Mobile and responsive behaviour

A narrow side panel on desktop may need to become a full-height sheet on small screens.

  • full-width or bottom sheets often work better than sliver panels on phones
  • scroll inside the panel without trapping the entire page scroll incorrectly
  • large touch targets for close and primary actions

05 — Review

Before you approve

A short checklist for drawers and side panels in code review.

  • the pattern fits the task; content is not trapped unnecessarily
  • focus, Escape, and close controls work on keyboard and touch
  • mobile layout is usable; nested overlays are avoided