Components-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.

Usage¶

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.
Sheets can also cover the toolbar as they move offscreen.
A toolbar’s left and right actions are never split by another sheet of material
Toolbars share a seam that transforms into a step, it is called a waterfall.