A drawer is a panel that slides out from either the side of the page, down from the top, or up from the bottom. It can contain a set of information or actions.

A drawer allows for tasks to be completed efficiently as a person can interact with the component without leaving the current page.

The drawer component has three main types of variants.

The drawer can be positioned to slide out from the left, right, top, or bottom of the page.

The drawer has three size variants: small, medium, and large.

For expanding the drawer, you can either use the built-in handle or provide a custom trigger element.

Use a drawer to help provide more screen space for content. A drawer is for displaying additional relevant information, while the primary content should always be present on the screen.

For complex apps, consider using a drawer for allowing advanced features to be revealed only when they are needed. This will help to prevent people from feeling overwhelmed by the amount of information.

Avoid using a drawer in the same position as primary navigation components, such as alongside a side navigation component.

Don't use a drawer for displaying essential content as it can easily be missed or ignored. Include it in the main page content instead.

Where possible, avoid repeating information in a drawer that is displayed in the main page content.

Don't use a drawer to interrupt the user flow for an important decision or confirmation. Use a dialog instead. Dialogs have more prominent positioning and are less likely to be overlooked.

In its default collapsed state, the drawer component is displayed as a narrow bar with an arrow, along the edge of the page. A person can click on this handle to expand the drawer.

The drawer can be collapsed by clicking the arrow which is visible when the drawer is in its expanded state.

The controlled variant of the drawer component allows for a custom trigger element to be used, such as a button elsewhere on the page. When using this variant, the drawer will be completely hidden when collapsed.

For collapsing this variant of the drawer, a 'close' button will be displayed instead of an arrow.

Try to use a drawer size which corresponds to the amount and complexity of its content.

Use drawer positions that are consistent across your app based on the type of content they contain. For example, if you are using a left-positioned drawer to show search filters on one page, use the same drawer position for showing search filters on other pages.

Use the bottom right area of the drawer to display buttons used for performing primary actions, such as submitting a form.

Try to use a short heading which clearly describes the purpose of the drawer. Long headings will be wrapped onto multiple lines.

You can display any component inside the content area of the drawer component. This might include various form fields, for example, such as checkboxes and radio buttons.

Make sure the content of the drawer matches the context of the user action which triggered it.

A sliding animation is used when the drawer component is expanded and collapsed.

Make sure to adjust the drawer's heading level as needed to achieve a logical heading structure across the page.