When should I use a drawer?

Recommendation

Use a non-modal drawer when the task benefits from seeing or using the page alongside it. Use a modal drawer only when the task should temporarily block the page. Give extended, independent work a separate page.

Problem

Users need details, controls, or a secondary task attached to the current page.

Use a non-modal drawer when

Users inspect an item, adjust filters, or edit contextual details while referencing the page.
Users need to switch between the panel and the workspace without repeatedly closing and reopening it.
The available width leaves both areas readable and operable; resizing the content is one option.

Use a modal drawer or page when

Use a modal drawer when a short, focused task should temporarily make the rest of the page unavailable.
Use a separate page for extended or independent work that needs more room and navigation.
On narrow screens, consider a stacked section, full-screen task, or page. Do not preserve side-by-side layout if either area becomes unusable.

Example

Non-modal drawer

Open the project details, then use Mark complete in the workspace. Both areas remain available. On a narrow screen, the details stack below the workspace.

Website

Status: Active

Modal drawer

This drawer temporarily blocks the rest of the page. Preparing the demo export updates the message below; Cancel and Escape leave it unchanged.

Implementation

Choose modality explicitly. A side-anchored position or slide animation does not determine whether the page is interactive. State whether closing applies changes, cancels them, or only hides the panel.
For a non-modal in-page panel, use a named section with a visible heading. An opening button can expose aria-expanded and aria-controls. Keep normal keyboard access to the panel and the page; do not mark the background inert or make it pointer-only.
If opening the panel moves focus, choose a useful target such as its heading. When closing removes the focused control, return focus to the opener or another logical control. Provide a visible close action and support Escape to close the panel without overriding an inner widget’s own Escape behavior.
For a modal drawer, prefer a native <dialog> opened with showModal(). Give it an accessible name, move focus inside, keep the background inert, contain Tab focus, support Escape, and return focus appropriately on close.
Keep focused controls visible. A non-modal overlay must not leave keyboard focus hidden behind it without a way to reveal that control. A layout that gives the panel its own space can avoid this problem.
Adapt to available space and zoom. If a responsive change alters modality, update focus and background interaction too. Respect reduced-motion preferences and provide buttons so opening and closing never depend on a swipe.
Use navigation semantics for a drawer that contains destination links. A navigation drawer and a contextual task drawer serve different purposes; this guide focuses on contextual work.

Tradeoffs

A non-modal drawer preserves access to the workspace but reduces available space and adds a second area to navigate. A modal drawer keeps surrounding content visible but unavailable. On small screens, neither the side position nor a visible sliver of the page guarantees useful context.

Verification

With keyboard, pointer, a narrow screen, and zoom, can users open and close the drawer, reach every control, and understand whether the page is available? Confirm that Cancel or Escape does not apply unsubmitted changes.