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
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.
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 30px margins. Custom background colors and dividing lines may extend to 100% width.
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.
Displaying the second level uses an animation to provide context.
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.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Basic View | [](/design/c/drawer/v2.0.0/#rd-basic-view) |
| Detail View | [](/design/c/drawer/v2.0.0/#rd-detail-view) |
Drawer