Drawer

Best practices

Drawers should be used to support a focused task that complements the current page rather than replacing it. They work best when users need to review, edit, or act on related information without losing their place in the underlying experience. The content should have a clear purpose and remain tightly scoped to avoid turning the drawer into a page within a page.

Design drawers to be predictable and self-contained. They should present only the information necessary to complete the intended task, with a clear entry point and exit. If a workflow becomes lengthy, highly structured, or requires significant navigation, consider moving it to a dedicated page instead.

When to use

• Users need to complete a secondary task while maintaining context.
• Supporting information should remain available without leaving the current page.
• The interaction requires more space than a popover or tooltip.
• Users may benefit from comparing drawer content with the underlying page.
• The workflow is short, focused, and self-contained.

Common examples include:

• Shopping carts
• Filters and refinements
• Account or profile panels
• Navigation panels on smaller screens
• Item details or previews
• Simple edit forms

When not to use

• The interaction is critical and requires the user's full attention.
• The workflow spans multiple complex steps.
• The content is better represented as a dedicated page.
• Users need to compare large amounts of information side by side.
• The content is transient feedback (use a toast instead).
• The purpose is to request confirmation before proceeding (use a dialog instead).

If the drawer begins to feel like an entire application within the application, reconsider the pattern.

---

Anatomy

1. Dismiss
2. Title (optional)
3. Description (optional)
4. Slot
5. Footer area (optional)

Behaviour

Drawers slide into view from the edge of the viewport while preserving the user's current context. They remain open until explicitly dismissed or until the associated task has been completed. Opening a drawer should never unexpectedly change the underlying page or cause users to lose their place.
Drawers may be dismissed using a dedicated close control, by selecting an explicit cancel action, or by interacting outside the drawer when appropriate for the context. Closing a drawer should return users seamlessly to the underlying experience, preserving page state and scroll position whenever possible.

Layout & constraints

A drawer should occupy only the amount of screen space necessary to support its content, allowing users to retain awareness of the page beneath. Width should remain consistent across similar use cases to establish familiarity and predictable behaviour. The drawer component offers flexibility through two width presets - small and medium.

Size small

Size medium

Drawer internal structure

Content should be organised into clearly defined sections with sufficient spacing to support scanning. If the content exceeds the available height, the drawer itself should scroll while remaining anchored within the viewport. Persistent elements such as titles, key actions, or footers may remain fixed where appropriate to support longer interactions.

Interaction & states

Interactive elements within the drawer should behave consistently with the rest of the interaction experience, supporting hover, focus, press, disabled, and active states where applicable. Primary actions should remain easy to identify and reach throughout the interaction.

Content guidelines

Drawer content should be focused on a single objective. Use clear headings that describe the task or content, and organise information so users can understand and complete the task with minimal effort.
Keep copy concise and prioritise essential information. If supporting content or explanations become extensive, consider linking to a dedicated page rather than expanding the drawer indefinitely. Actions should use clear, task-oriented labels such as Apply filters, Save changes, or View cart, rather than generic labels like Continue or Submit.

Visual hierarchy & placement

The drawer should establish a clear visual hierarchy through its title, content, and actions. Users should immediately understand what the drawer is for, what information it contains, and what actions are available.

Primary actions should be visually distinguished from secondary actions and consistently positioned throughout the product. Supporting information should not compete with the primary task or overwhelm the available space.

Placement options

Drawers can slide into view from either the start or end edge of the viewport, depending on the context and purpose of the content. The chosen placement should feel natural in relation to the interaction that triggered it and remain consistent across similar use cases.

In general, use the end side of the viewport for supporting tasks and contextual content, such as shopping carts, filters, or item details, as this preserves the user's primary reading flow and keeps the main content visually anchored. Use the start side when the drawer contains navigational content or complements the site's information architecture, such as mobile navigation or secondary navigation panels. Regardless of placement, drawers should maintain consistent sizing, spacing, and interaction patterns to create a predictable user experience.

Accessibility Considerations

• Drawers should support keyboard navigation and maintain a logical focus order.
• Users should always have a clear and accessible method for closing the drawer.
• The drawer's purpose should be immediately understandable from its title.
• Motion should remain subtle and respect reduced motion preferences where supported.

(Technical accessibility requirements, including focus management and ARIA implementation, are documented separately.)

---

Related Components

• Modal: For interruptive tasks requiring acknowledgement or confirmation.
• Popover: For lightweight contextual content or actions.
• Toast: For transient feedback after an action has completed.
• Side Navigation: For persistent navigation rather than temporary content.