components icon

Drawer

A drawer is a secondary content component that sits off-screen until triggered by the user.

Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

What's new

The v2 drawer component incorporates several optional elements beyond text, including forms, imagery, and contact methods. In v1, drawer was called “Off Canvas.”

Anatomy

The parts of a drawer, labeled 1 through 5.

The drawer component contains five elements within three sections:

Header
 1. Trigger: button, text link, or icon required to hide the drawer.
 2. Title: headline or title.
Body
 3. Description: optional introductory content.
 4. Container: textual content or interactive fields.
Footer
 5. Call-to-action: button, button group, or link.