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


Document Tags and Contributors

 Contributors to this page: chrisdavidmills, chrisdavidmills-github
 Last updated by: chrisdavidmills,