Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
colourYellow
titleOngoing

...

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspectsAllowing user for dual-screen support, and workspace customization.

...

Usage & Behaviour

Tabs organize and allow navigation between groups of content that are related and at the same level of the hierarchy.

...

Tabs can be switched by clicking on a different tab.
Each tab label describes the content contained within it.

Structure

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

Structure Element

Description

Container

Display a navigation text element arranged together with the active inactive highlighted

Tab item

  • Describes its content and sets user expectations

  • one to two words maximum

  • Icons are not permitted as a tab labels

Active tab

To differentiate an active tab from an inactive tab, apply an 3 px underline and color change to the active tab’s highlighted.

...