Design Pattern

Drawer

A drawer is a supplemental panel that slides in from the edge of the screen. It works well for navigation or settings panels, but because it behaves similarly to a modal, it must include focus management and Escape-key handling.

Difficulty: Advanced Category: Navigation

When to use / not use

Use it when

  • When you want to offer mobile navigation or an auxiliary menu in limited space
  • When you want to separate settings or filters from the main content area
  • When you need temporary supporting UI that closes back to the original screen

Don't use it when

  • When the navigation should stay visible all the time
  • When the UI needs a stronger interruptive emphasis, such as confirmations or warnings → use a dialog
  • When the content is large enough that a dedicated page would be easier to understand

Anatomy

1 Trigger button (opens the drawer)
2 Overlay backdrop
3 Drawer panel (sliding container)
4 Header (title and close button)
5 Content area (nav, form, or information)
  1. Trigger — The button that opens the drawer. It is also the focus return target when the drawer closes
  2. Overlay — Separates the drawer from background content and can optionally close the drawer on click
  3. Panel — The main area that slides in from the side or bottom
  4. Header — Includes the title and close button so the purpose is clear
  5. Content area — Holds navigation, settings, or supporting forms

HTML Structure

Key points

  • Give the drawer container role="dialog" and an accessible label so assistive technology knows what it is
  • Always provide a visible close button
  • Move focus to the first actionable element or header when the drawer opens
  • Return focus to the trigger button when the drawer closes

CSS Implementation

Styling points

  • Use transform and transition for the slide animation
  • Use an overlay to make the layer separation obvious
  • Control width or height relative to the viewport so the occupancy stays usable on mobile
  • Prevent background scrolling while the drawer is open

Accessibility

WCAG 2.1.1 Keyboard

The drawer must open and close with the keyboard, and Escape should close it.

WCAG 2.4.3 Focus Order

Keep focus inside the drawer while it is open, then return it to the trigger when it closes.

WCAG 4.1.2 Name, Role, Value

Use role and labeling so the drawer is clearly exposed as an interactive region.

Keyboard operation

  • Use Enter or Space on the trigger to open it
  • Use Escape to close it
  • Use Tab to move through focusable elements inside the drawer
  • After closing, focus returns to the trigger

Live Demo

Left drawer

A navigation drawer that slides in from the left.

PreviewFullscreen

Right drawer

A right-side drawer variation suited to settings panels.

PreviewFullscreen

Bottom drawer

A bottom-sheet style example that works well on mobile.

PreviewFullscreen

Common mistakes

No focus trap

If focus escapes to the background while the drawer is open, keyboard interaction breaks down.

Cannot close with Escape

Overlay-style UI should always provide a keyboard way to dismiss it.

Background content stays interactive

If clicks and scrolling pass through to the background, both state handling and the user experience become unstable.

State changes are too abrupt

Without a slide animation or overlay, users lose the visual origin of the panel.