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

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 as a tab labels.

Structure

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

Navigation view top pane anatomy

Navigation items
Separators
Selected item (displayed)

Structure Element	Description
Hierarchy	Parent for the entire tree is optional. A tree should have a parent if the parent has meaning or to allow the user to select the entire tree in case there is a use case that will require it. When you do use a parent node for the entire tree, expand this node by default.
Node	Collapse/expand button: in case the node has descendants. Icon (optional): should be used only if the tree can contain several types of nodes. If all nodes are of the same type, an icon should not be used. Label (node name) + tooltip in case the entire name does not fit. Counter (optional): the number of elements the node contains States: Focus, Hover, Selected, Disabled.
Default Sorting	Alphabetically (between and within the hierarchy level/group)
Loading	When a user expands a node, if the nodes are not shown immediately, provide "loading" indication at the place below the expanded node.
Interaction	Click on the expand/collapse button will do the respective action. Click on the node label (+counter) will select the node.
Keyboard functionality	<TBD>

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.

Implement the focus as follows

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.

Additional guidelines

Do not display a loading indicator above the tab while the number for the item count is loading.
Handle empty tabs as follows:
- Hide tabs that do not contain any information, and do not allow the user to create content..
- Show empty tabs that allow users to create content, such as notes or attachments.
Only use the tab bars to navigate between tabs. Do not use any other navigation links. For example, do not let users click an item in tab A that takes them to tab B. This type of cross-navigation inside a container is confusing, and cannot be handled by the back navigation.