Filter Drawer

The filter drawer is a component that slides in from the side of the screen, providing an intuitive and accessible way to refine content, search results, or perform data-driven tasks on a web interface.


The filter drawer component is a good option for holding an extensive filtering situation. Use a filter drawer where the experience requires many filters options, providing the user a possibility to customize their preferences having a focused experience. This is useful not to clutter the main page with information that is not mandatory.



Accordion anatomy diagram
  1. Header: Contains the Drawer Title and Close Button.
  2. Body: Contains customizable filtering elements.
  3. Footer: Docked button component confirms applied filters and dismisses drawer.


Drawers were built to be placed on the right side of the screen, sliding to the left side when triggered, and adding an overlay to the previous shown screen. Drawers are responsive, which means they change their sizes in the experience depending on the screen size. For desktop or mobile’s views, the component will always cover the entire screen height, while its width will depend on the size chosen. 


Drawer Width

Large (1440px and up)


Medium (992px – 1439px)


Small (641px – 991px)


X-Small (640px and below)




The drawer is opened and closed by pressing a trigger, and it can also be closed by pressing anywhere on the main screen, outside 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 in case the content displayed requires it. However, it is recommended to be as concise as possible to minimize cognitive load and to help users get back to their original task.


Drawer header

Be brief and descriptive about the subject or action a user must take. Try to use verb and noun combinations that clearly describe the drawer’s task or purpose; for example, 'Sort & Filter.' Header length should not exceed one line.


Body text

Body text length will adjust itself 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. Content can include imagery, charts, tables, or text.



Use sentence case in headers and body text, unless referring to a proper noun. For buttons, use title case.



Do not punctuate button text or header text. For the drawer body, use normal punctuation rules.