...

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

...

Types

Type	Usage	Image
Main tabs	Use it as tabbed navigation - Single row above their associated content	Image Added
2nd level tabs	Single row above their associated content	Image Added
Details pane tabs	Single row above their associated content in the details pane	Image Added
Ribbon tabs		Image Added
Side tabs <TBD>

Usage & Behavior

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

General guidelines

Structure

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

Structure Elements

• Container

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

• Tab item

  • Describes its content and sets user expectations

  • Each tab label describes the content contained within it

  • one to two words maximum

  • Icons are not permitted as tab labels

• Active tab

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

...

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

States

...

State	Image	Comment
Regular
Hover
Active
Selected
Other focused
Other focused hover
Other focused active
Selected focused

...

Interaction

• You can click on the entire label

• Tabs can be switched by clicking on a different tab

• There's always one tab open

• Only 1 content can be viewed at a time when clicking on another tab the display will change for the selected tab

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

...