Drawer

When to use this component

Use a drawer when:

• There are too many navigation items to fit comfortably in the main layout
• Users need quick access to different areas of the product
• Navigation includes grouped or hierarchical content (up to two levels)
• People frequently move between sections

Avoid using a drawer when:

• There are only a few navigation items
• Key actions need to always stay visible
• The content is critical and should not be hidden behind an interaction

Behaviour

The drawer has two states: closed and open. When closed, it sits off-screen. When open, it slides in and sits above the page content.

The underlying page remains visible, so users don’t lose context.

The drawer can include:

• A simple two-level hierarchy
• Grouped navigation to support scanning
• Optional quick actions at the top

Interaction

The drawer is opened via a menu button and slides in from right to left.

Users can close it by:

• Clicking the close (X) button
• Clicking outside the drawer
• Pressing the Esc key

Navigation

• Clicking a level 1 item will either take the user to a page, or expand and collapse nested items
• Clicking a level 2 item takes the user to a destination

Quick actions (optional)

Placed at the top

Used for frequent or high-priority tasks

Footer

• Contains secondary links and support content
• Visually separated from the main navigation

Motion

Motion helps users understand what’s happening and keeps interactions feeling smooth.

Drawer transitions

Opening

• Duration: 300ms
• Easing: ease-out

The drawer slides in from the right and settles into place above the page content.

Closing

• Duration: 200–250ms
• Easing: ease-in

The drawer slides out to the right, returning focus to the underlying page.

Nested navigation

Expand and collapse

• Duration: 180–200ms
• Easing: ease-in-out

Used when level 1 navigation items in the drawer reveal or hide level 2 items.

Chevron indicator

• Duration: 150ms
• Easing: ease-in-out
• Rotates 180° between states

Used on level 1 navigation items that contain nested content.

Accessibility

Screen reader behaviour

• The drawer supports accessible navigation for assistive technologies.
• Screen readers will announce when sections are expanded or collapsed. When the drawer is closed, its content is no longer reachable.

Keyboard support

• Enter or Space to activate items or expand sections
• Esc to close the drawer

Visual and interaction requirements

• Ensure a minimum contrast ratio of 4.5:1
• Always provide clear focus states
• Use touch targets of at least 44px
• Don’t rely on icons alone, always include text labels
• Clearly show which page is currently active

Alternative components

Depending on the needs, you might consider:

• Top navigation or tabs when there are only a few key destinations that should always be visible
• Side navigation when navigation needs to always stay visible