Usage

Drawers provide access to destinations and app functionality without navigating away from the current page. They help organize secondary content and actions, making your interface cleaner and more focused.

  • Use drawers for navigation menus in mobile and responsive applications
  • Organize filters and sorting options that need to be accessible but not always visible
  • Present settings panels that complement the main interface
  • Display contextual information without disrupting the user's workflow

Basic Example

A simple navigation drawer that slides in from the left side of the screen.

When to Use

Drawers are best suited for specific use cases where content needs to be accessible but not always visible. Here are common scenarios:

Navigation Menus

Drawers are ideal for primary navigation in mobile and responsive applications, providing access to main sections without cluttering the interface.

Settings and Configuration

Use right-anchored drawers for settings panels that allow users to configure preferences without leaving their current context.

Filters and Sorting

Drawers work well for filter panels in e-commerce or data-heavy applications, allowing users to refine content without losing their place.

Best Practices

Follow these guidelines to ensure drawers are effective and user-friendly:

  • Clear Purpose: Use drawers for navigation, filters, or supplementary content. Avoid using them for critical actions or primary content.
  • Appropriate Width: Keep drawer width between 240-360px on desktop. On mobile, drawers can be up to 80% of screen width.
  • Positioning: Use left anchors for primary navigation, right anchors for settings/filters, and top/bottom for mobile-specific patterns.
  • Responsive Behavior: Use temporary drawers on mobile (< 960px) and consider persistent or permanent drawers on desktop (> 960px).
  • Keyboard Support: Ensure drawers can be opened/closed with keyboard (Escape key) and focus is managed properly.
  • Clear Dismissal: Provide multiple ways to close temporary drawers: backdrop click, close button, or Escape key.
  • Content Organization: Keep drawer content focused and well-organized. Use lists, dividers, and headers to structure information.
  • Performance: Lazy load drawer content when possible to improve initial page load performance.
  • Accessibility: Use proper ARIA labels, manage focus trap within the drawer, and ensure screen reader compatibility.
  • Animation: Use smooth slide-in/out transitions. Avoid overly long animations that slow down user interactions.