This is an archived page. It's not actively maintained.

Toolbars contain actions, indicators and navigation elements associated with the current view.


Toolbars have the following characteristics:

  • Toolbars span the full width of the screen and are always the same height.
  • Toolbars never scroll with content; instead they float above content.
  • Toolbars may contain a wide variety of elements, including buttons, filters, progress / activity indicators, etc. but the maximum number of items at once is five.
  • Toolbars should be positioned at the bottom of the screen unless tabs / filters are also present. In that case items in the toolbar should be positioned in the header at the top.

A toolbar can display text (A) related to the content.

A Toolbar can contain navigation functions (B). In browser, users can tap on the back / forward button to navigate through a webpage.

Implementation guides