5.7 KiB
Toolbar
UI guidelines on using toolbars.
A toolbar provides quick access to frequently used actions and filters. It appears in dialogs, pop-ups, tool windows, lists, trees, and tables.
{width=428}
Toolbar items
The following controls can appear on a toolbar:
-
Icon button: action, toggle, or drop-down
-
Separator
-
Label
-
Chevron
{width=704}
What items to add on toolbar
Put only the most frequently used commands on the toolbar. Rely on usage statistics if it’s available.
If an action is new, and it seems useful, add it to the corresponding toolbar. Remove it after several releases if it’s not popular, which means it’s used by less than ~5% of users who use this toolbar.
Do not put unpopular or well-known commands, like Copy and Paste on the toolbar. Use the main menu or the context menu for such commands.
It’s not recommended to add more items than the default toolbar length. Otherwise, the items will be hidden and it will be hard to discover them.
{width=283}
Left align items on a horizontal toolbar and top align on a vertical toolbar.
Group related toolbar icon buttons and separate groups with lines. If there are several unrelated icons, do not add separators after each icon.
{width=242}
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.
Arrange items inside groups by the frequency of use, from left to right from top to bottom. Rely on statistics.
It is recommended to arrange groups in the following order unless it contradicts the usage statistics. If it does, arrange groups by the frequency of use.
{width=260}
The less frequently used commands can be right aligned.
{width=491}
Do not put two toolbars next to each other. One toolbar should be enough for the most popular actions.
| Incorrect | Correct |
 |
 |
Make every toolbar action available from the main menu or the context menu. Toolbars are customizable and can be hidden, so commands should be available from other places as well.
If the default component size changes and there is not enough space for items on a toolbar, hide them under the chevron.
{width=30}
Visibility and customization
Provide the ability to hide the toolbar in the main window via the toolbar context menu.
{width=428}
Provide commands for invoking the toolbar. Use the main menu for the main window toolbars. Use the pane view settings for toolbars in tool windows.
{width=597}
Provide the ability to customize toolbars in the main window. To do this, add the toolbar to the list on the Settings | Appearance & Behavior | Menus and Toolbars page and open it using the Customize Toolbar... action from the toolbar context menu.
{width=404}
Sizes and placement
The toolbar can be vertical or horizontal.
{width=498}
By default, place the toolbar at the top of the area.
{width=220}
Exceptions
Place the toolbar on the left in horizontal tool windows if horizontal space is not limited. A horizontal toolbar will be too wide and will occupy lots of space:
{width=220}
Place the toolbar on the right if it’s not the first toolbar in the pane, and it’s rarely used.
{width=386}
Place the toolbar at the bottom on macOS, and on the right on Windows and Linux in tables.
{width=432 style=block}
macOS
{width=431 style=block}
Windows
The toolbar width is limited by the width of the element it belongs to. For example, by the width of the tool window or the list part in a master-detail layout.
| Incorrect | Correct |
|---|---|
 {width="283"} |
{width=283} |
Toolbar sizes are the same for all themes:
{width=539}
{width=418}
The toolbar items sizes change together with the application font size proportionally.
{width=604}
Style
{width=477}
Separate the toolbar from the content with a line from all four sides if it appears in a tool window or a table:
| Incorrect | Correct |
|---|---|
 {width="220"} |
 {width="220"} |
Do not separate a toolbar with lines if it appears above the list:
{width=404}