| Table of Contents |
|---|
...
Tabs enable content organization at a high level. They allow the user to switch between views, data sets, or functional options.
...
Types
Type | Usage | Image |
Main tabs | Single row above the associated content. Use it as tabbed navigation. |  |
2nd level tabs | Use only as a second level to main tabs. |  |
Details panel tabs | Use only in the Details Panel. |  |
Ribbon tabs | Use only in the /wiki/spaces/UserExp/pages/1390479038 as tabbed navigation. |  |
Vertical Tabs | TBD |  |
Usage & Behavior
Tabs organize content into groups and allow navigation between them. Content should be:
...
The label describes the content contained within each tab, and sets user expectations.
States
Main Tabs | 2nd Level | Details Pane Tabs | Ribbon Tabs | Ribbon Tabs - Collapsed | Vertical Tabs | |
Regular |  |  |  |  | |  |
Hover |  |  |  |  | |  |
Active |  |  |  |  | |  |
Selected |  |  |  |  | Expands the Ribbon |  |
Focused, Regular |  |  |  |  | |  |
Focused, Hover |  |  |  |  | |  |
Focused, Active |  |  |  |  | |  |
Focused, Selected |  |  |  |  | Expands the Ribbon |  |
Interaction
Only one tab can be selected at a time.
A tab can be selected by clicking it.
Selecting a tab will change the view below to the new tab’s associated content.
Clicking on a new tab will automatically remove the selection from the previously-selected tab.
When the tab label is truncated, hovering over it will show a Tooltip with the full label.
Validations and errors
Tab item error |  |  |
Tab item warning |  |  |
Best practices
Use
to switch between views, data sets, or functional options.
when the content needs to be organized into exclusive groups.
...
when there is not a lot of content. In this case consider using an Accordion.
when there are dependencies between tabs. In this case, consider using a Wizard.
when all the data needs to be visible in one place.
General
Use clear and short labels.
Do not use icons for tab labels.
Keep in mind reduced mobile widths and space for translated labels - the character length of a label will impact the experience.
A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.
In the Details Panel, a maximum of four tabs is recommended.
Tabs should be ordered by importance, popularity or user’s workflow. The order should be consistent across the experience.
Tabs with related content should be grouped adjacent to each other.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Focus management
Keyboard | Description |
|---|---|
Tab |
|
Shift + Tab |
|
Space | Changes the view to the focused tab. |
Enter | Changes the view to the focused tab. |
Esc | N/A |
Arrows | N/A |
Responsive Design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
...
Where tab labels do not fit within the tab width, the end of the labels should be truncated with an ellipsis ….
...
Design
Zeplin link | Screen thumbnail |
|---|---|
Main Tabs |
|
2nd Level Tabs |  |
Details Pane Tabs |  |
Ribbon Tabs - Expand |  |
Vertical Tabs |  |
Code
...