Overview

Tabs used to group location of search query.

• Tabs are used to navigate between different panels of content that should be shown within the same context / viewport (eg. staying in place while alternating between panels),
• Tab contentContainer can hold labels, icons, and any type of content inside,
• Tabs can be modified to allow the user to close or reorder tabs in the tab view.

When to Use

tab-wtu (tab and multi-column view)

• Tabs can be used to organize content that should be shown within the same context,
• Don’t use tabs when users need to compare the content between different panels, instead use Multi-column View control.
• Use tabs only when the content can be logically chunk together so users can easily predict what they'll find when they select a given tab within the context.
• If you don't find clearly distinct groupings, then tabs are likely the wrong interface control for managing your content. (Read more on NN group ->)

Looking for Window Tab or Tab Well?

Window tab and tab well guidance has moved under Windows. This page is about the tabbed segmentation control in UITK framework.

Upgrading Legacy Solutions

New secondary tabs used as tabs (recommended), and IMGUI toggle buttons used as tabs

It is recommended to update existing solutions to the new Tabs API, including toggle button combinations (as pictured above) as previously used in IMGUI framework.

Tab APIs

Guidance

Content best practices

• Tab labels should be 1–2 words. Short labels are more scannable.
  
• When used within Inspector, ensure the tab view fits within minimum inspector width (275 pt) and avoid using more than four tabs,
• Do not use ALL CAPS for tab labels.
• Avoid the disabled state. If a user cannot use it, remove it from the tab.

Unity copy style guide

For information on copy styling best practices go to the UI copy style guide ->

Reorderable tabs

Image: tab-reorder

reorderable property can be used to add dragging support to tabs in the tab view. The default value is false. Set this value to true to allow the user to reorder tabs.

For reorderable tabs, it is important to keep the view-data-key unique for the TabView and Tab elements inside of it. The view-data-key helps store the state of the tabs such as the order and state. By having an empty view-data-key, which is the default value, the state of the tabs will not persist when reloading the document.
‍

Properties

reorderable

Indicates whether the tabs inside the TabView can be reordered interactively by user.

Docs ->