| Status | ||||
|---|---|---|---|---|
|
...
Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects.
...
Types
Type | Usage | Image |
|---|---|---|
Main tabs | Use it as tabbed navigation - Single row above their associated content |   |
2nd level tabs | Single row above their associated content. Appear only as a second level to main tabs hierarchy |   |
Details pane tabs | Single row above their associated content. Appear only in the details pane |   |
Ribbon tabs | Use it as tabbed navigation in the ribbon only |   |
Usage & Behavior
...
General guidelines
Structure
The horizontal layout of the tab bar never changes. The tabs always appear side by side
There's always one tab selected at a time
...
Later on, you can show the tab last selected by the user.
States
State | Image |
|---|---|
Regular |   |
Hover |   |
Active |   |
Selected |   |
Not selected focused |   |
Not selected focused hover |   |
Not selected focused active |   |
Selected focused |   |
Interaction
You can click on the entire label
Tabs can be switched by clicking on a different tab
Only 1 content can be viewed at a time when clicking on another tab the display will change for the selected tab
When the label is truncated, hovering over it will show a tooltip with the full label
...
State | Image | full image |
|---|---|---|
Tab item error |   |   |
Tab item warning |   |   |
Best practices
...
Zeplin link | Screen thumbnail |
|---|---|
Main Tabs |
|
2nd Level Tabs |  |
Details Pane Tabs |  |
Ribbon Tabs - Expand |  |
...