Drawer

UI Components

A panel that slides in from the edge of the screen (usually left or right) to reveal navigation, filters, or additional content without navigating away from the current view.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Drawer coming soon.

How It Works in Apps/Websites

Drawers are overlay components that slide in from screen edges, typically triggered by a hamburger menu icon or swipe gesture. They dim the background content with an overlay and can be dismissed by clicking outside, pressing escape, or using a close button. Common on mobile for navigation, but also used on desktop for contextual panels like shopping carts or filters.

How AI Interprets This Term

When you say 'drawer', AI expects: a panel sliding from left or right edge, 280-320px wide on mobile (or up to 400px on desktop), with a dark overlay behind it. Contains navigation or content, with smooth slide animation. Close button or outside-click dismissal expected.

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create a navigation drawer that slides in from the left

Detailed

Design a filter drawer for e-commerce: slides from right, 360px wide, has category checkboxes, price range slider, color swatches, and Apply/Clear buttons at bottom. Semi-transparent dark overlay.

Comparative

Show a mobile navigation drawer (from left) vs a cart drawer (from right) side by side

Compare With

Related or contrasting terms to help you understand the differences.

sidebarmodalbottom sheet

Variants & States

Variants

navigation drawerfilter drawercart drawerpersistent drawer

States

closedopeningopenclosing

Usage Guidelines

When to Use

  • •Mobile navigation
  • •Filter panels in e-commerce
  • •Shopping cart preview
  • •Detailed item views

When NOT to Use

  • •When content needs to be always visible
  • •For critical actions (use modal)
  • •When you have simple navigation

Related Terms

Hamburger Menu

A button consisting of three horizontal lines that, when clicked, reveals a hidden navigation menu. Named for its resemblance to a hamburger.

Modal

A dialog box that appears on top of the main content, requiring user interaction before returning to the underlying page. It typically includes an overlay that dims the background.

Sidebar

A vertical panel positioned along the left or right edge of the main content area, containing navigation, filters, or supplementary information.

Back to category