The drawer is a scalable way for users to navigate between views or filter views. The drawer can also include links to app settings or other tools.
Drawers can also be used to access user-generated content such as browser tabs, accounts in an email or messaging client, or multiple calendars. Drawers slide out from the edge of the screen at the user's request (pushing the underlying content aside), then slide back out of the way when no longer needed.
Notes
Basic drawer
The drawer is used for basic navigation; filtering content and can include links to the app settings and tools.
The drawer is triggered by the drawer button (A) on the left side of the header and consists of a scrollable list of options. Action buttons (B), if needed, are to be placed at the very bottom of the drawer.
A drawer closes when a user taps an item. To close the drawer without making a selection, the user taps the drawer button or any area outside the drawer panel.
Persistent drawer
A persistent drawer remains open even when a user selects an item within the drawer body. This allows the user to select or deselect multiple options.
To close the drawer, the user can tap on the drawer icon or in the area outside the drawer.
Interaction — standard drawer
User taps the drawer button within the header of the E-Mail app.
The drawer panel slides down from the top of the screen. The action button on the header fades out as the drawer panel slides down.
User taps an item in the drawer to select the item and the drawer automatically closes. To close the drawer without making a selection, the user taps the drawer button or any area outside the drawer panel.
The drawer panel slides back up to the top of the screen. The action button on the header fades back into place as the drawer slides out.
The user is now able to view the sent folder.
Interaction — persistent drawer
User taps the drawer button within the header of the Calendar app.
The drawer panel slides down from the top of the screen. The action button in the header fades out as the drawer slides in.
The user can select one or multiple items in the drawer to view. The drawer remains open despite taping on one or many items.
The user then closes the drawer by tapping on the drawer icon, or by tapping outside the drawer area.
The drawer panel slides back to the top of the screen. The action button on the header fades back in as the drawer fades out.
The calendar has been updated with new content.
