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	Example
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
Side tabs	TBD

---

Usage & Behaviour

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Tabs can be switched by clicking on a different tab.
Each tab label describes the content contained within it.
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 label

General guidelines

Structure

The horizontal layout of the tab bar never changes. The tabs always appear side by side

1. Navigation items
2. Separators
3. Selected item (displayed)

Default

By default, show the first tab as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

• Later on, you can show the tab last selected by the user.

Number of tabs

A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.

Main tabs	2nd level tabs	Details pane tabs	Ribbon tabs

Interaction<TBD>

• You can Click on the entire tab section item

• Theres always one tab open, and only one

• Only 1 content can be viewed at a time, when clicking on other tab, the open tab will close

• Hovering over tab will show a tooltip with the full ?????????????? name of the section header

Transitions<TBD>

Clicked tab will side open while the former open section in the accordion will close at the same time

Best practices<TBD>

Use:

• For long lists, consider using search

• Use clear labels - Accordions hide content, so the labels need to be clear. 

• If users will only need a few specific pieces of content within a page.

• If you have only a small space to display a lot of content.

Don’t use:

• If users need to see most or all of the information on a page. Use well-formatted text instead.

• If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

Usability guidance<TBD>

• Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.

• Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)

Current appearances in our products