Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- For completing a secondary task (particularly complex tasks, like searching or navigating complex elements), while keeping the user on the same page
When not to use
- For a small amount of content that could have just been displayed on the page
- To communicate an important warning in order to prevent or correct critical errors (use a Dialog instead)
- To request the user to enter information critical to continuing the current process (use a Dialog instead)
- For complex decision-making that requires the user to consult additional sources of information (potentially blocked by the Drawer). Consider using a standard page.
Best practices
Do use a Drawer for search or other complex elements.
Be careful when using wider Drawers, as people may lose track of where they are in their workflow, since there is a lower visual affordance to show that they are in an overlay.
Don’t present a task in a Drawer if users need to reference content behind the Drawer, because when it's open, the background content isn’t interactive or focusable. Keep the user on the page instead.
Don't use a Drawer for a small amount of content that could have just been displayed on the page.
Don't allow horizontal scrolling of content within a Drawer.
Don't move the Drawer to the left side of the screen.