Drawer

Drawer slides into the screen from the right side and is placed visually over the content of the page.

It aims to display extra information while keeping the navigation enabled on the main content.

Zoning

Style

Variations

States

Drawers are either visible or hidden.

Content

Drawers are “optional” content living on top of primary content. Since they fill only 1/3 of the page's width, prefer extra or additional information. Avoid dense copy and complex forms. Drawer contents should be efficient, short and tailored for the limited layout space available.

If you need more space, use full-page layout.

Footer can contain only calls to action.

Interaction

Drawer Heading and Footer zones are fixed; the Content zone can display a scrollbar when its content overflows.

Accessibility

Drawers disclosures have a value specified for aria-controls that refers to Drawer.

When Drawer is visible, disclosure has aria-expanded set to true. When Drawer is hidden, it is set to false.

Usage