Drawer

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

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

When to use

Drawer is similar to tooltip and popover but are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.

ComponentUse case
DrawerA drawer can contain different kinds of content or small interactions. It is a secondary content component that sits off-screen until triggered by the user.
TooltipTooltip is a container that temporarily displays short, contextual text and is activated when a user hovers or focuses on an icon or other trigger.
PopoverPopover is a container that displays supplemental information after pressing its trigger element. They can contain limited interactions with its content, but should not contain actions that are required for the experience.

Anatomy

The drawer component, depending on the options combinations, can contain up to four elements within three sections.

Example showing the four elements within three sections:

Header
 1. Button: the trigger required to hide the drawer.
 2. Title (optional): headline or title.
Body
 3. Container (optional): textual content or interactive fields.
Footer
 4. Call-to-action (optional): optional button, button group, or link.

Articles

Left-Side Vertical Navigation

Read the Nielsen Norman Group's article on vertical navigation.

Timing guidelines

Read the Nielsen Norman Group's article on drawer's timing.