Components Toolbars

Toolbars

Toolbar actions appear above the view affected by their actions.

Toolbars appear a step above the content they affect. They may constrain their width to accommodate material passing over them.

Do not separate a toolbar’s actions by another sheet of material, unless it is transient, such as a menu or dialog.

Elevation

Above app content

Scrolling

Affected content scrolls underneath toolbars.

Dismissed content

Sheets may temporarily cover the toolbar while moving offscreen.

Toolbar actions in Material Design appear above the view

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

Toolbars appear a step above the sheet of material affected by their actions. When sheets scroll underneath toolbars, they are clipped and cannot pass through to the opposite side.

Material Design toolbars clip scrolling sheets below

Toolbars are located a step above another sheet.

Sheets can also cover the toolbar as they move offscreen.

Material Design: Sheets cover toolbar when offscreen

The toolbar maintains its seam until it moves off of the screen.

Finally, the second sheet can cover the toolbar as it moves.

Toolbar covered by second sheet in Material Design

The second sheet covers the toolbar as it moves.

A toolbar’s left and right actions are never split by another sheet of material, with the exception of temporary materials such as menus or dialogs.

Instead, toolbars can constrain their width to make space for sheets of material passing over them. The actions on the left and right cluster to stay on the same side of a toolbar.

Material Design: Constrain width under full length

Do.

Constrain width to less than the full length of its material.

Material Design: Avoid splitting sheets of material

Don’t.

Never allow a sheet of material to be split by another persistent sheet of material.

Toolbars can share a seam with another sheet.

In cases where they share a seam that transforms into a step, it is called a waterfall.

Material Design toolbars can share a seam or form a waterfall

In the waterfall variant of clipping, the toolbar starts out as seamed and then lifts to form a step.