A toolbar is a strip of controls that allows convenient access to commonly-used functions. Most toolbars only contain graphical buttons, but in more complex applications, other types of controls such as drop-down lists, can also be useful.
Use a toolbar to provide access to common actions, tools or options in primary windows. Header bars also perform this role, and a toolbar is generally not required if you are using header bars.
While toolbars are a common approach, there are cases where they are not the most effective. Interfaces that focus on direct manipulation, or which make heavy use of progressive disclosure, may provide a better alternative. Each of these approaches requires more time and effort at the design stage, and should only be pursued by those who are confident in pursuing more original design solutions.
Only include controls for the most important functions. Having too many toolbar controls reduces their efficiency by making them harder to find, and too many rows of toolbars reduces the amount of screen space available to the rest of the application.
Utilize conventions for toolbars to increase familiarity. For example, the main toolbar in an office application will nearly always have new, open and save as its first three toolbar buttons. Similarly, the first buttons in a browser application should be back and forward.
Place only the most commonly-used application functions on your toolbars. Don’t just add buttons for every menu item.
If you are using a menu bar, ensure that it includes all the functions that appear on your toolbar, either directly (i.e. an equivalent menu item) or indirectly (e.g. in the Options ▸ Settings dialog).
Toolbars shouldn’t include buttons for Help, Close or Quit, as these are rarely used and the space is better used for more useful controls. Similarly, only provide buttons for Undo, Redo and the standard clipboard functions if there is space on the toolbar to do so without sacrificing more useful, application-specific controls.
Toolbar buttons should have a relief, and icon buttons should use symbolic icons.
Got a comment? Spotted an error? Found the instructions unclear? Send feedback about this page.