Drawer
Search the component library

Drawer

v1.0.0-beta.3

The drawer component offers a convenient method for presenting secondary information which doesn't need to be immediately visible.

Usage Guidelines

Drawers should contain secondary content which only needs to be presented when specifically requested by the user, such as help information.

Features

  • Overview and item detail levels
  • Animations for show/hide and viewing item details
  • Accessible implementation

Dependencies

None

Showing/Hiding

Selecting some UI element on the main page can trigger the drawer to slide in from the right, for example clicking ‘Help’ in the header.

A drawer can be dismissed by clicking the included ‘x’ icon, by selecting the trigger element again, or by hitting the escape key.

Basic View

The basic version of the drawer has a section for a title at the top and a built in close ‘x’ icon.

Content may populate the area below this with 20px margins.

Detail View

If the drawer is presenting a list of items, selecting one of them should transition the drawer to the detail view. This adds a back label and icon for returning to the originating view.

The drawer should retain state on close, i.e. closing the drawer on a detail view and then reopening the same drawer will return the user to that detail view.

Animation

Displaying the second level uses an animation to provide context.

Responsive Behavior

The drawer maintains the same behavior all the way down to the extra small breakpoint, at which point it begins taking up 100% of the viewport width.

Redlines

Basic View

Spacing
  • 20px side and top margins around the content area
  • 16px vertical margins around the title area, 20px side margins
Typography
  • Title is a large label
Icons
  • Close icon is times
  • A focused icon will used the standard browser outline for focus
Shadow
  • Color is rgba(0, 0, 0, 0.3)
  • 8px blur
  • -1px X axis offset
Title Separator
  • 1px solid hairline gray (#D0D0D0)
Keyboard Shortcuts
  • Pressing escape should close the drawer in any mode

Detail View

Title
  • Use a static “Back” label
  • Focusing the “< Back” element will use the standard browser outline for focus
Icon
  • chevron-left
  • 8px spacing between icon and label

Show/Hide Transition

Animation
  • Slide in from the right
Timing
  • 0.5 seconds
  • ease-in-out easing

Detail View Transition

Animation
  • Content container slides in from the right
  • Title slides away to the left
  • Back fades/slides in from about the middle of the drawer
Content
  • 0.3 seconds
  • ease-in-out
  • Opacity is 0 in hidden state
Hiding Title
  • Move 40px off to the left
  • Opacity fades to 0
  • 0.3 seconds
  • ease-in-out
Restoring Title
  • Restore properties
  • 0.4 seconds
  • ease-in-out
Showing Back
  • Starts with midpoint centered at 60% of the content width and opacity of 0
  • 0.3 seconds
  • ease-in-out
Hiding Back
  • Reset position and opacity
  • 0.4 seconds
  • ease-in-out

Changelog

1.0.0-beta.3

  • ADDED: Animation redlines
  • ADDED: Accessibility checklist
  • ADDED: Sketch and AI mockups

1.0.0-beta.2

  • ADDED: Basic -> Detail transition video
  • ADDED: Initial redlines

1.0.0-beta.1

Initial version.