- 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
- 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
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.
A Tab has a header that can respond to pointer and mouse events. The header can hold an icon, a label, or both. The Tab content container can hold anything inside of it giving more flexibility to customize its layout.
A tab view provides additional functionality to the Tab. It allows a group of tabs to interact between each other by hiding the inactive tabs and displaying the active one. Additionally, it adds the ability to re-order the group of tabs.
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.
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.