Toolbar

Frequently used items

Add actions and settings that are frequently used:

• If usage statistics are available, frequent use is more than 5% of this feature's users.

• If usage statistics are not available:

  • Add items that are needed for the most common use cases of this feature.

  • If possible, add usage statistics logging for toolbar items that lack it. Check statistics after 3–4 weeks of use. If the items are used by less than 5% of the feature's users, consider removing them from the toolbar.

New items

When adding a new action or setting for a UI area that already has a toolbar: if the new item is expected to be used frequently, add it to increase its discoverability.

Location

Toolbars can be horizontal or vertical. Which type to use, depends on what control the toolbar is used for.

Lists, trees, tables

Use horizontal toolbars for lists, trees, and tables that appear in dialogs and popups. Place the toolbar at the top of the control.

Vertical tool windows

Use horizontal toolbars in tool windows that are vertical by default.

Horizontal tool windows

Use vertical toolbars for tool windows that are horizontal by default. Place the toolbar on the left in a tool window.

If a horizontal tool window has several sections, place a toolbar on the right in sections after the first one if these conditions are true:

• The sections are a master-detail layout, with a list or tree on the left and a selected item's details on the right.

• The toolbar contains actions that are used occasionally, like the Soft-Wrap setting in the Console section of the Build tool window.

This way the toolbar would not break the connection between the master and the detail sections.

A horizontal toolbar can be used in a horizontal tool window in the two cases:

• The toolbar contains items used for managing processes, like Step In and Step Out in the Debug tool window, or Run and Stop in the Run tool window. A horizontal toolbar makes the actions more noticeable and easy to reach.

• The toolbar contains items that need horizontal space, like a search field and drop-down lists in the Git tool window.

Items alignment

On a vertical toolbar, always top-align items.

On a horizontal toolbar:

• Left-align items by default.

• Right-align the less frequently used items.

Items grouping

Group related toolbar items and separate groups with lines.

If there are several unrelated icons, do not add separators after each icon. Separators could be entirely omitted if there are 5 and fewer icons on a toolbar.

Correct

Incorrect

Label

Label a group of icons if it helps to make the icons clearer and if it’s needed to promote the icons. The icons group becomes more visible with the label.

Items order

Arrange separate items or groups in the following order by default.

If usage statistics are available, and popular items appear not at the top or left of a toolbar, consider arranging by the frequency of use.

Toolbar overflow

A toolbar's width is usually limited by the element it belongs to. If there is not enough space for items on the toolbar, they are hidden under a chevron. Hovering the chevron shows the hidden items.

It is recommended to keep the number of toolbar items to what would be visible by default. Otherwise, the items will be hidden and it will be hard to discover them.

Avoid two toolbars

Do not counter a toolbar overflow by adding more toolbars. If there are too many items on a toolbar:

• Group items under drop-down icon buttons

• Remove unpopular items by following the guidelines in What items to add on toolbar

Correct

Incorrect

Toolbar border

For scrollable content in tool windows, do not show a toolbar border if the content is at the top scroll position. Show the border once the content is scrolled under the toolbar.

In places other than tool windows, it is fine to always show the border.