Drawer

A drawer is a temporary workspace that allows users to complete tasks without navigating to a new page.

Also known as:
ModalModal windowSlide-out modalMenuCompartmentDossierOverlayLightbox

AnchorNeed to know

  • Drawers come in two sizes, Small (375px max-width) and Medium (600px max-width). Choose the right one for your needs. The horizontal width of content should always fit the drawer. Users should never be able to scroll horizontally within a drawer.
  • Drawers can have overlays or can appear in parallel with page content. An overlay drawer is useful when you want to focus the user on a specific task. A parallel drawer can provide additional context or information during a task.

Visuals

UI Kit

Examples

To keep in mind

Modals vs. Drawers

Modals and Drawers serve a similar purpose. Both are for displaying additional content or functionality without directing the user to another page. Both should be used sparingly.

Modals:

  • Are for simple messages or actions
  • Should not be scrollable
  • Have a single Primary Action Button
  • Always have an overlay, with the page in the background fully disabled

Drawers:

  • Are for displaying more complex content or workspaces
  • Can be vertically scrollable (and therefore allow more vertical space)
  • Can have multiple Primary Actions
  • Can be displayed in parallel with page content, with or without an overlay

Medium vs Small

Use Medium Drawers (600 px):

  • When you need to display additional or supplemental page content
  • When you want to provide additional navigation within the Drawer such as Tabs.

Use Small Drawers (375 px):

  • When it’s important to stay in context and when the action applies changes to the parent page.
  • When you expect this functionality to be required on mobile. Because a small drawer looks the same as it does on a mobile vs. a desktop, it can often provide a friendlier experience on mobile.
  • When you can structure content using just headings or collapsible rows (i.e. you do not require additional navigation like tabs).

Overlay vs Parallel

Drawers can have overlays or can appear in parallel with page content.

Overlay Drawers:

  • Are useful when you want to focus the user on a specific task.
  • Sit over the top of page content, like a modal, meaning a user is unable to interact with the main page while the drawer is open. Clicking outside the drawer should not close the drawer. This is to prevent the user losing unsaved work.
  • Are full viewport height (covering the main nav).
  • Are vertically scrollable separate to the main page content. When the overlay is open, you can only scroll inside the overlay (i.e. when you scroll to the bottom of the drawer,the rest of the page should not start scrolling).

Parallel Drawers:

  • Push page content to the left and display in parallel, with no overlay. This is useful for providing additional context or information during a task.
  • Allow users to continue interacting with the main page content, including clicking links. Navigating away from the page will close the drawer. For this reason, parallel drawers should be avoided when asking the user to input information or make progress that will be lost by closing the page.
  • Are vertically scrollable separate to the main page content.
  • Start below the main header navigation so navigation elements are still available.

Headers and footers

A drawer always has a header that consists of:

  • A left aligned, short H2 title (<35 characters for a medium drawer, <15 characters for a small drawer)
  • A Close X button, positioned on the left hand side
  • A full-width horizontal divider to separate the header from body content

If the Drawer involves a primary action like a Save function, it should be housed within a footer.

If the content within the drawer exceeds the screen height, the header (and footer, if applicable) should be fixed and always visible.

Dismissing/closing a Drawer

  • Overlay drawers are not dismissed by clicking outside the window (unlike modals). This is to prevent users accidentally losing their work.

Users can dismiss a Drawer by:

  • Clicking an X close button
  • Pressing the Esc key
  • Clicking the primary action (e.g. Save or Submit)
  • Upon dismissal, the drawer focus should be restored to the triggering element

Mobile/Responsiveness

  • A Small Drawer maintains the same behavior all the way down to viewports of 405px (375px + 20px), at which point it begins taking up 100% of the viewport width.
  • A Medium Drawer will need to reflow when the viewport is <600px. If you expect this functionality to be used heavily on mobile, consider whether a Medium Drawer would work instead.

Animation and loading

Loading patterns

  • Slide in from the right
  • Timing: 300ms
  • Ease-in-out easing

Accessibility

  • Drawer states (open/closed) should be announced by a screen reader.
  • The focus should move to the drawer heading once opened.
  • A Small Drawer should use an intentional keyboard trap that keeps tab order (looped) within the drawer until it is closed. This is so a user cannot focus on anything outside the drawer.
  • A Medium Drawer may use a keyboard trap, depending on its functionality, however it is not required as Medium Drawers allow clickable actions outside the drawer.
  • The Esc key should close the drawer along with the close icon.

When to use and when not to use

When to use
  • When you want to help users complete a task without navigating away from the page.
  • When you want the experience of a modal but the vertical space is not sufficient.
  • When the Workflow pattern feels too heavy-handed.
When not to use
  • When displaying content within the drawer that is not suited for small areas, such as large tables or visualizations
  • When it’s a critical action, e.g. asking the user to confirm or deny an action, or part of a complex multi-step task.
  • Beware the Crap Drawer, i.e. packing a Drawer with a bunch of unrelated functionality.

See also

External links