Toolbar

Provides access to commonly used actions related to the user's current view or task

How they help

Toolbars improve efficiency by reducing the number of steps needed to perform common tasks. They can also offer contextual options that change based on the user's current activity, ensuring relevant tools are readily available. This streamlined access to functionality helps users interact more effectively with the application or website.

Image of a toolbar

Example of a toolbar

 

 

Anatomy

  1. Container: box that contains groupings of inputs and triggers
  2. Input: clear and concise text
Image of left side of a toolbar

Visual for left side of toolbar anatomy

 

Image of right side of a toolbar

Visual for right side of toolbar anatomy

 

 

 


Designer resources