What is a drawer in UX design?
A drawer, sometimes called a side panel or side sheet, is a UI component that slides in from the left or right edge of the screen to reveal additional content, navigation options, or controls. Unlike a modal that appears in the center of the screen, a drawer maintains a spatial relationship to the edge it slides from, which helps users understand where it came from and that their current content is still present behind it. Drawers are used for navigation menus on mobile, filter panels in data-heavy interfaces, settings panels, and detail views in master-detail layouts.
When should you use a drawer versus other overlay patterns?
Drawers work well for navigation and supplementary content that users need to access repeatedly throughout a session without losing their place in the main content. A filter panel that users open, adjust, and close multiple times during a search session benefits from a drawer because it slides away cleanly and the user returns to the same position in the results. Drawers are less appropriate than bottom sheets on mobile when the content is contextually triggered by an action at the bottom of the screen, and less appropriate than modals when the content requires exclusive focus and cannot be dismissed by clicking the background.
How to design accessible drawers?
Drawers that are modal, meaning they block interaction with the page behind them when open, must trap keyboard focus within them while they are open. Pressing Escape must close the drawer. When the drawer opens, focus must move into it. When it closes, focus must return to the element that triggered it. Drawers that are non-modal, allowing interaction with the page behind them while the drawer is open, must not trap focus but must ensure that keyboard users can navigate into and out of the drawer without becoming disoriented. The drawer must be announced to screen readers with an appropriate role and label.