Drawer

ECT approvedUpdated May 21, 2026

Description

A drawer is a panel that slides in from the left or right side of the screen.
It's typically anchored to the left or right edge of the parent container.
On larger screens, the drawer does not overlay or mask content. Instead, the main view adapts its layout to accommodate the drawer.
On smaller screens of 768px or less, the drawer switches to full screen mode.
A drawer can be either:
a non-dismissible, persistent panel that stays visible alongside the main content, or
a dismissible panel that the user can hide when not needed. A dismissible drawer is typically opened when the user activates its trigger, such as clicking a button or icon.
It's purpose is to act as a supporting UI, giving users access to tools, contextual information, or quick actions without disrupting the main workflow.
Commonly used in dashboards and editing environments where users need to reference or interact with multiple panels simultaneously.

Warning

Choosing the right component Both Drawers and Sidebars are used to present secondary content alongside a main view, but they serve different purposes: A Drawer is designed as a companion to the main content. Choose it when users need to see both main page content and supporting content at the same time. For example, viewing their manager's OKRs when generating their own OKRs. A Sidebar is designed to capture the user’s full attention by masking the main content behind a background overlay. Choose it for filtering or for creating objects such as contacts or invoices.

Anatomy

anatomy

Size

Height

The drawer height should be 100% of the parent container.
A scrollbar is displayed when the content within the drawer is taller than the available height.

Responsive width

The default drawer width is set to 30 viewport width with a min-width of 288px and a max-width of 760px. These values can be overridden if required by the consuming app.

Default width (30 vw)

Max width (768 px)

Min width (288 px)

Viewport 768px or less

Variations

Position

A drawer can be positioned either to the left or right edge of a parent container.

Left

Right

Header and footer

With header

With hide button (in header)

With footer

Best practices

Always make sure the main content resizes to accommodate the drawer.
A drawer should load content dynamically without refreshing the page.

Requirements

Users should be able to:

Identify drawer content as a distinct section of content.
Navigate to and interact with interactive elements within the drawer.
Understand the relationship between drawer content and main page content.

Interactions

Drawer content does not require user action to open or close. Drawer content is persistent and non-dismissable.

Keyboard interactions

Tab. Moves focus from the previous interactive element on the page to the first interactive element within the drawer.
If the drawer contains no interactive elements, focus should move to the first interactive element within the main content of the page.

Design considerations

Visually distinguish the drawer content from the main content of the page using clear, visual cues.
The drawer should have a heading related to the purpose of the content within the drawer.
Use headings within the drawer so users can distinguish between sections of content.

Development considerations

Drawer content is visually distinct from other sections of content on the page, and should be reflected as such to screen reader users.
The region should have a clear accessible name, provided by an aria-labelledby pointing to the id of the heading within the drawer.
If drawer content is tangentially related to the main content of the page, wrap the drawer in an aside or use role=”complementary”.
When using persistent column layouts, make sure that content remains responsive.
On smaller screens, place the drawer content after the main content of the page.

Date	Changes
November 2025	Added guidance for optional 'Hide' button in header.Added guidance on full-screen mode on smaller viewports.Added position use-case information and header and footer guidance to Variations.
August 2025	Updated guidance on the accessibility tab.
May 2025	Added Dialog sizes.
April 2025	Re-instated component.Updated guidance to clearly differentiate from the Sidebar component.