Toolbar

The Toolbar pattern groups iconic and textual commands for a page or view in one place. It is a common feature on the tablet and less common on the phone. Toolbars can exist as either a header or a footer of the page.

Appearance

Appearance characteristics for this pattern.

• Placement: On phone, it is displayed in a footer but can, occasionally, be in the header. On tablet, it can also be in the header.
• Spacing: Toolbar icons should be equally spaced, unless there is a need to separate one or a set of icons further.
• Shared: Toolbars can share a header or footer with other components, for example: title, buttons, icons, search, menus, slider, etc...
• Icons: Icons can be placed flat on a toolbar or inside of a button that is placed on the toolbar.
• Icon State: Icons and buttons can have normal, selected or disabled states.
• Icon Size: Use the same size icons that are used in buttons. All icons should be the same size.
• Icon Number: A toolbar will consist of 2 or more actions.
• Width: Headers and footers will span the width of the page. A toolbar may use the entire header or footer, but does not need to.

Behavior

Common behaviors for this pattern.

• Context: Items in toolbars can change based on context what is being viewed.
• Contextual Actions: Toolbar icons or buttons may launch a popup or menu of options contextual to that icon or button.
• Show/Hide: There is no show or hide capability on headers and footers.
• Orientation Change: On phone the width of the toolbar can vary between landscape and portrait views.
• Selected State: When the user touches the button or icon there may be a temporary selected state that is displayed.

Usage

Usage guidelines for this pattern.

• Toolbars provide commonly used commands that apply to the context of the existing view.
• Allow the toolbar items to fit on a portrait orientation and size appropriately for a landscape orientation.
• Toolbar should be considered when:
• There is a common action(s) the user needs to perform.
• The action is used very commonly (i.e. 7 to 10 times a visit).
• The action is used several times in a row.
• The action requires extra steps that is burdensome to complete.

Related

• Used On: Phone, Tablet
• Also Called: App Bar, Nav Bar, Command Bar, Options Bar
• Related Components: Image
• Related Patterns: Navigation Bar
• Resources: None