Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Examples of an active and focused Inspector tab with two inactive tabs in light and dark themes
Tabs simplify the visual real estate of the workspace while improving organization and workflows

Overview

  • Tabs organize related windows or content in the Editor by allowing a unique visual location in the interface
  • They function by helping to create a structure for condensing visual elements like windows and controls into a nested and navigable pattern
  • Tabs simplify the visual real estate of the workspace while improving organization and workflows

Creating tabs in Editor frameworks

Tabs in UI Toolkit

UIT

Not available in UI Toolkit framework
Tabs are currently not available in UI Toolkit, however you can still instantiate tabs using IMGUI framework.
How to use tabs in UIT?

To use tabs in UI Toolkit, use the IMGUI version to instantiate a new window, and use a UI Toolkit container inside the window where you can add controls from UI Toolkit.

Tabs in IMGUI

Examples of tabs ordered by first tab at the left, mid tab in the center and last tab on the right, as well as examples of both a label with an icon and a label without an icon
Examples of first tab, mid tab, and last tab on the left; Examples of tabs with label and label + icon on the right

How to use

Primary tabs are rendered with the following styles when creating a new window.

Style in

IMGUI

.dragtab
This style is used to render the container for tabs
.dragtab-first
This style is used to render a tab without a 1px accent border on its left side when its active (First tab in a series of tabs)
.dragtab-label
This style is used to render the text label for tabs

Secondary tabs

Icon of a letter I in a blue circle indicating this is a piece of informational content
Pre-release content
Secondary tabs is currently in development and is not yet available in Long Term Support releases.
Learn more
New secondary tabs used as tabs (recommended), and IMGUI toggle buttons used as tabs
  • If secondary tabs are not available in the version or framework of a project, toggle buttons in a can be used as secondary tabs to switch between views within the same interface. imgui only
  • Use variable-width tabs to fit the content of each tab
  • Choose tab contents that are relatively uniform in length
  • Ensure that the tabview toolbar fits within minimum inspector width (275 pt)
  • When using a tabview toolbar in the inspector, use no more than four tabs
Icon displaying the Unity logo
GUI.Toolbar

Scripting API for GUI.Toolbar
 

docs.unity3d.com

Arrow icon indicating link goes to an external source

Guidance

When to use

  • Tabs are used to navigate between windows in the Editor by allowing a unique visual location in the interface
  • Tabs cannot be used to group and navigate secondary content tabs inside a primary Editor window because they represent only the highest level of the layout hierarchy in the Editor. Use a secondary organizational component instead that is visually distinct from tabs

How to use

  • Tabs should only relate to a single window, other windows should be indicated with additional tabs

Style

All tabs have a similar base construction, though their contents may vary slightly, and possess the same base behaviours. While there is minor variation between different tabs with regards to their automatic resizing of panels or where they open in the Editor they are all fairly consistent at their core.

Tab label

Tab labels contain the name of their window. These are meant to indicate the window’s purpose whether it is displayed or grouped behind other tabs. Tab labels should not be displayed vertically.

Icons in tab labels

Only document window tabs, like the scene, game, or Inspector should have icons in their tab label. Tool window tabs do not have icons. Tab icons should follow the standard Iconography guidelines. Icons should be simple intelligible glyphs relating to the tab contents. Icons should be placed to the left of the header text with the following margins.

Tab container

Tab container holds the tab label and icon (if applicable). The container is the area in which a tab’s context menu can be accessed. The tab container also holds the tab’s indicator which shows if the tab is being focused on.

Tab border
Examples of tabs with borders on the left and right sides
First tabs (.dragtab-first) only have a border on their right side

Tabs have borders based on their order in the tab well (dock). While regular tabs .dragtab have borders on both sides, a tab docked in the first position .dragtab-first only has a right border.

Icon of a letter I in a blue circle indicating this is a piece of informational content
Tab borders
Only active tabs have top borders (blue highlight) for emphasis
Tab well (dock)

The space within a panel that tabs inhabit is the tab well. Although this is technically part of a panel it has an important effect on tab behavior and anatomy; it represents the area in which tabs can inhabit and where other tabs will be grouped when placed in the same panel.

The tab well acts as a container for tab labels, allowing for the placement of tab navigation elements and panel UI. As a result it is persistent even if there are no other tabs in the panel to convey the grouping functionality.

Example of an inspector tab being dragged into a tab well with a highlight box showing its destination
Illustration of an inspector tab being dragged into a tab well
Window toolbars

Some tabs contain toolbars below their labels that affect their contents, either by changing the information being presented or altering the view in some way. The contents of a window toolbar can vary depending on the window they belong to and the actions that are useful within, including; search bars for assets, toggles for view modes, and dropdowns for tab layouts.

Example of a tab containing a toolbar below the tab label
Some tabs contain toolbars below their labels that affect their contents

Behavior

Tab interactions
  • Tab interactions are available via: the tab well menu; right-click contextual menu of the tab; or through the tab’s primary toolbar when applicable
  • All key interactions, like closing the tab, should be available through the tab panel itself so users are not forced to navigate to an external menu to perform them
  • Interactions should not be placed in the header, with the exception of the right-click contextual menu
Tab well menu / window menu

Clicking on Tab Well Menu icon . ... opens the tab menu with active tab options on top, and global tab options below.

Example of a left-click on a tab well menu’s vertical ellipsis icon showing active tab options on top, and all tab settings below.
Left-clicking on a tab menu’s vertical ellipsis icon shows additional actions ordered with active tab options on top and global tab options below
Right-click menu

Right-clicking on a tab opens tab menu with the target tab options on top, and global tab options below.

Example of a tab well right-click menu showing the target tab options on top and global tab options below.
Right-clicking on the tab menu presents additional actions ordered with the target tab options on top and global tab options below
Opening a new tab

When a new tab is opened via the menu option Add Tab, the new tab should appear to the right of the tab dock in the same tab group.

Closing tabs

Tabs should close existing panels if they are the only occupant and are closed or dragged into other panels.

Panel behaviors

Tabs appear in panels throughout the workspace. Tabs will create new panels if placed in an unoccupied dock zone.

Grouping:  Multiple tabs
  • Grouped tabs refer to multiple tabs that appear in one panel
  • Only one tab should be active per panel at a time
  • Tabs should group so that only the active tab is highlighted and all other tabs should be in their inactive state
  • Only active, highlighted tab content is displayed in the window. Inactive tab content is hidden

Formatting

Anatomy and Layout

Anatomy
A tab with its three parts labeled
Anatomy of a tab

While the bulk of tab anatomy exists in the windows and panels they inhabit it is important to understand them in their own context. Tabs are made up of the tab title, tab container, tab well, and may sometimes include a window toolbar.

1. Tab container
2. Tab label
3. Tab icon

Horizontal padding
Horizontal padding of a tab
Horizontal padding of a tab

Tabs have 7 px horizontal padding on both sides to keep the label and icon legible.

Layout and Specifications

Grouped tabs should be spaced evenly to prevent bunching and allow the user to easily distinguish each tab from the others. Tabs should never overlap.

Overflow

When the number of tabs in a panel is such that their labels exceed the available tab well space the tab labels will enter the overflow state and invoke scroll on either side.

These tabs retain the normal tab behavior, however their label can be repositioned with the scroll commands.

Tab order

Tab arrangement is determined by the user’s placement.

Interaction states

Examples of a default tab and its three other interaction states, in light and dark themes
Interaction states for tabs
Default (inactive)

The default state is the pre-interaction state. Tab is not active.

Hover

When the cursor is over the default (inactive) tab element.

Active  

When the tab window is visible, but not focused.

Active focused

When the user has clicked on a tab element to navigate to its window.

Color

Tab label color variables
1. Tab background 2. Tab label 3. Tab border
1. tab-background
--unity-colors-scrollbar_thumb-border-hover
The border color for a scrollbar's thumb/handle when the mouse pointer hovers over it
#8E8E8E
#686868
--unity-colors-slider_groove-background
The background color for a slider's groove (background)
#8F8F8F
#5E5E5E
--unity-colors-slider_groove-background-disabled
The background color for a slider's groove when it is disabled
#A4A4A4
#575757
2. tab-text
--unity-colors-slider_thumb-background
The background color for a slider's thumb/handle
#616161
#999999
3. tab-border-accent (focused)
--unity-colors-highlight-background-hover
The background color for line items when the mouse pointer hovers over them
rgba(0, 0, 0, 0.0627451)
rgba(256, 256, 256, 0.0627451)