Drawer

Problem Context

• A table row, card, chart point, activity item, or object summary has more detail than fits inline.
• Users benefit from comparing drawer content with the page behind it.
• The drawer content is supplemental or lightly actionable, not a long independent workflow.
• The product can maintain selected-object state, close behavior, and focus return when the drawer opens and closes.

Selection Rules

• Choose drawer when users need page-adjacent detail, preview, metadata, comments, simple actions, or object inspection without leaving the current page.
• Use modal dialog when the task must block the page until the user completes or cancels it.
• Use navigation drawer when the side surface contains app destinations rather than contextual detail for the current page.
• Use filter panel when the side surface contains criteria that narrow results and require applied-count, result-count, and clear-state synchronization.
• Use inline disclosure, popover, tooltip, or hover card when the information is short, local, or only needed temporarily near one control.
• Use a full page or details panel when the content requires deep reading, shareable URL state, long editing, or durable navigation history.
• Use a pinned or non-modal drawer when users must compare details with the underlying list or chart.
• Use a modal drawer only when background interaction would create conflicting state; provide scrim, Escape behavior, and focus containment in that case.

Required States

• Closed state with a clear opener tied to a specific object or page section.
• Opening state that identifies the selected object and moves focus to the drawer heading or first useful control.
• Open drawer state with visible title, object identity, close control, and supplemental content.
• Pinned or non-modal comparison state when background content remains intentionally usable.
• Modal or temporary state when background interaction must be blocked until close.
• Object-switching state where choosing another row updates the drawer without stale content.
• Dismissed state that returns focus to the opener or selected object and preserves page context.
• Responsive state that adapts drawer width, side, or full-screen behavior without changing the task contract.

Interaction Contract

• The opener names or is adjacent to the object whose detail will appear in the drawer.
• Opening the drawer does not unexpectedly navigate away or erase list, filter, selection, scroll, or chart state.
• The drawer title names the current object or supplemental task, not just Drawer.
• A visible close control, Escape behavior, and route/back handling close the drawer predictably.
• Focus moves into the drawer on open and returns to the opener, selected row, or next logical object on close.
• If the drawer is non-modal, background controls that remain usable are intentionally designed and do not conflict with drawer state.
• If the drawer is modal, focus stays inside the drawer and background content is inert until close.
• Changing the selected object while the drawer is open updates the drawer title, content, and status without leaving stale information visible.

Implementation Checklist

• Define whether the drawer is non-modal, pinned, dismissible, or modal for this workflow.
• Anchor the drawer to a page edge and size it so main content remains useful when comparison matters.
• Show the selected object, record, or task name in the drawer heading.
• Provide a labelled close button and Escape/back behavior.
• Move focus into the drawer on open and restore focus after close.
• Preserve underlying page state such as filters, selected rows, scroll position, and drafted inputs.
• Handle object changes while open with an updated heading, status, and content rather than stale details.
• Keep drawer actions light and move long workflows to a page, modal task, or dedicated editor.
• Test narrow viewports, long drawer content, scroll boundaries, pinned state, keyboard order, and screen reader names.

Common Generated-UI Mistakes

• Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help.
• Opening a drawer with no close control or keyboard dismissal.
• Treating a drawer like a modal while the page behind it remains partly interactive by accident.
• Covering the exact content users need for comparison without a pinned or resized state.
• Leaving stale details visible after the selected object changes.
• Putting a long multi-step workflow in a narrow drawer with hidden primary actions.
• Returning focus to the top of the page instead of the object or opener that launched the drawer.

Critique Questions

• What parent-page context must remain visible while this drawer is open?
• Is the drawer content supplemental, or has it become a separate task needing a page or modal?
• Can users close the drawer by pointer, keyboard, Escape, and route/back behavior?
• Where does focus move on open, close, object switch, and responsive breakpoint changes?
• Does changing the selected object update the drawer immediately and visibly?
• Would a navigation drawer, filter panel, modal dialog, popover, or details panel better match the content?