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 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.
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 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.
- Used On: Phone, Tablet
- Also Called: App Bar, Nav Bar, Command Bar, Options Bar
- Related Components: Image
- Related Patterns: Navigation Bar
- Resources: None