Components Action drawer

Action drawer

The action drawer provides access to primary and additional actions.

After a user-initiated action, the drawer slides up from the bottom edge of the screen as a sheet of material. A swipe up reveals additional content.

Wearable action drawer

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The action drawer provides access to actions, similar to the app bar in the Material Design guidelines. The drawer uses peeking behavior to work with display size limitations.

The wearable action drawer has a variety of display options:

Overflow menu (default behavior)

The action drawer may display access to an overflow menu.

Overflow menu

An expanded drawer with overflow actions

Single action

When the current view contains only 1 possible action, the drawer displays only that action, and the drawer can’t be expanded.

Single action drawer

An action drawer in a peeking state with a single action

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Single action

If the action drawer only contains a single action, place that action in the drawer.

The user taps the icon to directly perform the action.

Opening and performing actions in a action drawer

Multiple actions

For more than one action, place those actions in an overflow menu.

The user swipes up to reveal the overflow menu and taps the overflow icon for more actions.

Tapping on an action in the peeking drawer

Peek direction

If your content naturally shows the newest message at the bottom, like a chat, you can peek when the user scrolls the content downward. Automatically scroll the user to the newest message when they open this kind of view.

Peeking when the user scrolls the content downward