Description
ONGOING
Tabs enable content organisation at a high level, such as switching between views, data sets, or functional aspects. Allowing user for dual screen support, and workspace customisation.
Types
| Type | Usage (TBD) |
|---|---|
Main Tabs
| Use it as a tabbed navigation - Single row above their associated content |
2nd Level Tabs
| Single row above their associated content |
Details Pane Tabs
| Single row above their associated content in the details pane |
Ribbon Tabs | TBD |
Usage & Behavior
Guidelines
Present tabs as a single row above their associated content.Tabs can be switched by clicking on a different tab.
Each tab label describes the content contained within it. Labels are concise and use no more than two words. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in tab labels.States
Labels
- Each tab label describes its content and sets user expectations.
- Tabs with related content should be grouped adjacent to each other
- Labels are concise and use one to two words maximum.
- Tab labels should succinctly describe the content within.
- Icons are not permitted in tab labels.
Number of tabs
A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.
Order
Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.
States
Main tabs | 2nd level tabs | Details pane tabs | Ribbon tabs |
|---|---|---|---|
 |  |  |  |