Window toolbar in UI Toolkit

UI Builder

About UI Builder ->

UI Builder allows visual creation of UI assets in UI Toolkit, and is available as a built-in feature {2021.1 and later} or a package {2020.3 and earlier}

When to use

Window Toolbar sits at the top of a window below the tab label and holds elements that affect or pertain to items in that window. These can include the layout of the window, the creation of objects or elements within the window, or a method of switching between windows and tabs in the same panel.
‍
Using a toolbar when grouping multiple UI control elements improves access to important actions. Frequently used actions for windows or tabs should be added to the toolbar to help streamline the user’s access and enhance their workflow.

How to use

• Toolbar items should have a clear and logical function
• Toolbar elements should be related to the window’s function and not the user’s active task
• Toolbars should be visually consistent with other instances of the same type in the interface
• Not all primary toolbars have the same location; instead, the primary toolbar is whichever toolbar contains the main actions for the window
• The type of components in a toolbar vary depending on their location; for example primary toolbars on windows can also contain both tool-selection commands and standard action buttons
• When there is not enough room to fit all necessary controls into a single toolbar, use multiple toolbars that groups together actions that work on similar areas of the window

Style

Placing elements on left and right edges
‍As all controls have a left and right border by default, use these left/right styles to remove the respective side border so they can be positioned to the far right or left of the toolbar without creating a double border. (eg. .ToolbarDropdownLeft .ToolbarDropdownRight)
‍
Multiple toolbars
‍Primary toolbars should always be limited to universal elements. It is recommended to use only one toolbar where possible. However, a second toolbar can be used when there are relevant actions that relate to the window content. 

Do

Divide actions into multiple toolbars when needed
 

Don't

Do not include unnecessary actions just to fill empty space in the toolbar

Toolbar element groups

• Place most frequently used actions on the left of the toolbar with lesser used actions on the right. Users tend to scan the top left portion of the window first
• Related elements can be placed together within a toolbar to create toolbar element groups. Such groupings structure the toolbar’s contents for easy navigation
• Divide toolbar element groups by the type of interaction they allow. For example tools should be grouped together but toggles should be kept separate. Items that are grouped together appear to have related functions
• Toolbar element groups should be placed with space between others to help separate their function

Toolbar element grouping

Anatomy and toolbar controls

Window toolbar anatomy

1. Toolbar container: Scene toolbar contains various elements
2. Toolbar controls that are in scene view toolbar

Layout and focus

Window toolbars should always be located near the edges of tabs or windows. They should be placed above and separate from other contents.
‍
It is recommended to arrange toolbar elements to draw focus to high-traffic actions over low-traffic actions, with high-traffic actions to the left. Arranging content in this way is the most natural for human perception because users tend to scan the user interface from left to right starting from the upper left corner.

An example of drawing focus left to right in the  Editor application (main) toolbar; note that high traffic buttons are placed on the left (interaction tools) and low traffic actions on the right side (menus)

Toolbars can be arranged horizontally or vertically and should align along one axis to ease scanning by the user. Exceptions do exist where view controls are placed below tool groups, as in the tile palette window, but only in cases where the grouping is to centralize the elements in the window. This is to ensure readability and to minimize the real estate taken up by the Toolbar.

Color

Toolbar container variables

A game window toolbar showing different colors

Editor Color Palette

For general concepts about color use in the Editor go to Fundamentals > Color Palette ->

UI Toolkit samples

Go to Window > UI Toolkit > Samples, to view code samples in C# / USS / UXML.