Drawers & Sidebars

Drawers and sidebars provide navigation, settings, or contextual information alongside main content.

stellae.design

Design Principles

Drawers (slide-in) and sidebars (persistent) provide secondary navigation, settings, or context adjacent to the main view. Fundamental to responsive design: sidebar on desktop → collapsible on tablet → hidden drawer on mobile. Key considerations: overlay vs push behavior, animation, maintaining orientation.

Why It Matters

Drawers and sidebars are panel-based UI patterns that slide in from the edge of the screen to reveal secondary content, navigation, filters, or contextual actions without replacing the primary view. They solve a fundamental spatial problem in interface design — how to provide access to supporting information without navigating away from the user's current context or cluttering the main content area. When used well, they create a layered information architecture that feels spacious and organized; when used poorly, they become hidden dumping grounds for features that users cannot find or overlapping panels that obscure the content users are trying to work with.

Real-World Examples

Google Docs' commenting sidebar

Google Docs opens a right-side panel to display comments and suggestions linked to specific text selections, allowing users to review feedback while keeping the document content fully visible and editable. The sidebar scrolls independently from the document and highlights the relevant text passage when a comment is selected, maintaining a clear spatial relationship between feedback and content. This non-modal drawer pattern enables collaborative editing without context switching.

Figma's right-hand properties panel

Figma uses a persistent right sidebar to display properties, constraints, and design tokens for the selected element, updating dynamically as the user's selection changes. The panel provides deep contextual editing without opening modal dialogs or navigating to separate screens, keeping the canvas visible and interactive at all times. The sidebar's fixed position creates spatial memory — users always know where to look for element properties regardless of what they have selected.

Counter-example

Mobile app with multiple stacking drawers

A mobile banking app opens a bottom drawer for account details, then a second drawer on top for transaction history, then a third for transfer options, creating a confusing stack of overlapping panels with no clear way to navigate backward or close individual layers. Users lose track of which drawer they are interacting with, and the close gestures conflict — swiping down might close the top drawer or scroll within it depending on scroll position. The stacking pattern violates the principle that drawers should simplify navigation rather than creating a nested maze.

Role-Specific Guidance

Common Mistakes

• The most common mistake is hiding primary navigation inside a drawer on desktop viewports where there is ample horizontal space, forcing users to open a panel for every navigation action instead of providing persistent access to top-level destinations. Teams also neglect to implement proper keyboard and screen reader support for drawers — missing focus trapping, missing escape-key dismissal, and missing ARIA roles turn drawers into accessibility barriers. Another frequent error is using drawers for content that requires comparison with the main view, such as product details in a catalog, where a drawer's narrow width and overlay behavior prevent the side-by-side comparison the user needs.