Skip to main content

Side Drawer

A side drawer is a versatile UI component that can be used to present a wide range of content in a compact, accessible way.

Structure​

  • Backdrop: Transparent overlay that contains the side drawer dialog.
  • Header: A header containing a question or descriptive phrase that conveys an overview of the purpose.
  • Body: A scrollable body with children components. This is the most variable aspect of the side drawer.
  • Footer: A footer that contains actionable buttons.
  • Dismissal: Button element to dismiss the side drawer.
  • Actions: Buttons used to provide explicit action(s) the user can take to continue with a task.

Side Drawer

Guidelines​

When to use​

  • For necessary actions outside the main flow, that would require greater scroll depth or function than recommended within a modal.
  • You have long content that you want to keep out of sight at first.
  • To use progressive disclosure to reveal relevant information at the right time.
  • To keep content like structured navigation or screen-specific help accessible.

When not to use​

  • To force users to complete an action before continuing—use a modal.
  • For small bits of information focused on a single action—use a dialog.

Behaviour​

Open on user action​

Side draws disrupt the main flow. If they come as a surprise, they’re more likely to be dismissed. Only open a side drawer after the user has taken an action, so it’s clear why it was triggered.

The footer of a side drawer should remain "sticky" to the bottom of the screen, this is especially important when the Body of the side drawer is scrollable. It allows users to understand the actions they can take from this screen.

Direct user with the title​

A side drawer title sets the context for everything inside and also stays fixed at the top if the side drawer scrolls down. So the title should make it clear what the drawer relates to and what actions might be expected of the user. Keep it short and focused on either an action (verb) or a category (noun).

Do​
  • Edit email address
  • Delete employee?
  • Discard unsaved changes?
Don’t​
  • Edit the email address for this employee
  • Are you sure you want to delete employee?
  • Discard?

Allow users to close​

Users want to feel in control of their actions. Since side drawers act as interruptions, they can invoke negative feelings in users. Make sure users feel in control by offering them a clear option to close the modal and get back to the main flow.

You should try to match user expectations for the given platform. Responsive and native side drawers should always include a close button in the footer.

If you have a primary action in the side drawer footer then you should have a cancel button

If there is only 1 option and its ‘close’ (not a primary action) then the close function can be handled by the top right X

Desktop side drawers should include a close button in the upper right and the option to close the modal by clicking the overlay, this will disregard any changes they have created in the side drawer. Optionally include a secondary button in the footer.

Accessibility​

TODO

Add accessibility requirements and considerations.