Overview
The filter drawer component is useful when providing many filter options. This allows users to access all of the options without cluttering the main page.
Formatting
Anatomy
- Header: Contains the drawer title and close button.
- Body: Contains customizable filtering elements.
- Footer: Docked button component confirms applied filters and dismisses the drawer.
Layout
Drawers are placed on the right side of the screen. When triggered, the drawer slides to the left, and an overlay is placed on the previous screen. Drawers are responsive. For desktop or mobile views, the component will always cover the entire screen height. The width will depend on the size chosen.
Breakpoint | Drawer width |
|---|---|
Large (1440 px and up) | 390 px |
Medium (992 – 1439 px) | 390 px |
Small (641– 991 px) | 390 px |
X-small (640 px and below) | 100% |
Behavior
The drawer is opened and closed by pressing a trigger. The user can also close the drawer by pressing anywhere on the main screen, outside of the drawer. When the drawer component is open, an overlay appears behind it, shifting the focus from the page to the drawer.
It is possible for a drawer to include a scroll feature, if the content requires it. However, be as concise as possible to minimize cognitive load and to help users get back to their original task.
Content
Drawer header
Be brief and descriptive about the subject or action a user must take. Clearly describe the drawer’s task or purpose. Header length should not exceed one line.
Body text
Body text length will adjust based on the size of the drawer component. Use the space to explain the purpose of the drawer and make the content useful for the user.
Capitalization
Use sentence case in headers and body text, unless referring to a proper noun.
Punctuation
Do not punctuate button text or header text. For the drawer body, use normal punctuation rules.