Drawer

 

 

Anatomy

1. Header: includes drawer title, dismiss button or navigation
2. Body: core content of the drawer
3. Footer: includes primary, secondary and a more button for actions

 

 

Types

There are 2 types of drawers: overlay and inline.

• Overlay: an intrusive element that covers all or part of the main page content. Use overlay drawers to draw more attention to the drawer content.
• Inline drawer: a passive element that sits alongside the main page content. Use inline drawers when it is beneficial for users to view and interact with both the main content and the drawer content simultaneously.
  

 

 

Variants

Header

The header has 2 variants: with a dismiss button or with navigation.

 

Footer

The footer has a few variants: without a footer or with a footer that allows for button actions.

 

 

 

---

Designer resources