Description

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. Single row beneath the main tabs and above the associated content.
Details panel tabs	Use only in the Details Panel. Single row above the associated content.
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:

related.
at the same level of the content hierarchy.

General guidelines

Structure

Tabs consist of:

Tab items, shown using short text labels.
An active tab, which is visually different.

The horizontal layout of tabs never changes:

They always appear side by side in a single row.
There's only one active tab at any given time.

Default state

By default, the left tab is the first active tab. Note: This is the initial setting provided by the control. Technically you can override the initial selection, but it is not recommended.

Content

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.

Don’t use

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	Navigates between tabs (left to right, top to bottom). On the last tab navigates to the next component.
Shift + Tab	Navigates between tabs (right to left, bottom to top). On the first tab navigates to the previous component.
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.

For Main and 2nd level tabs, where the width does not allow all tabs to be shown at once:

Back and Next arrows should be shown, to allow users to scroll between the tabs.
On touch devices, click and drag should be supported, allowing the user to drag the tabs list horizontally.
Once the focus is removed from the tab area, the selected item should automatically move into view.

For Details panel tabs:

Where tab labels do not fit within the tab width, the end of the labels should be truncated with an ellipsis ….
- The full label should be shown in a Tooltip on hover.
- For touch devices, the full label should be shown in a Tooltip on tap-and-hold.

Design

Zeplin link	Screen thumbnail
Main Tabs https://zpl.io/bPkL1ma
2nd Level Tabs https://zpl.io/2ZqjW0X
Details Pane Tabs https://zpl.io/VODWzzr
Ribbon Tabs - Expand https://zpl.io/bJvqAmE
Vertical Tabs https://zpl.io/a3JAPNx

Tabs