Description

Tabs enable content organization at a high level. They allow the user to switch between views, data sets, or functional options.

Verint LUX Design System > Tabs > 01_Regular.png

Types

Type	Usage	Image
Main tabs	Single row above the associated content. Use it as tabbed navigation.
z2nd 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 Ribbon as tabbed navigation.

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.
Divider line between beneath the tabs, above the content.
Active tab. To differentiate the active tab from inactive tabs, apply a 3 px colored underline. (Designs for tabs in the Details Panel and Ribbon differ).

The horizontal layout of tabs never changes.

They always appear side by side in a single row.
There's always one tab selected at a 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.

Subsequently, the tab last selected by the user can be shown instead.

Content

The label describes the content contained within each tab, and sets user expectations
They should be short: one or two words maximum.
Icons are not permitted as tab labels.

States

Regular
Hover
Active
Selected
Focused, Regular
Focused, Hover
Focused, Active
Focused, Selected

Interaction

Only one tab can be selected at a time.
A tab can be selected by clicking on the entire label.
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 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.
Tab order should be consistent across an experience.
Tabs with related content should be grouped adjacent to each other.

Accessibility compliance

Each component should be A11y complied. Please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3.

Focus management

We already set a general guidelines described in Keyboard & Focus Management Guidelines

Screen reader support

Make sure the components support screen reader for content or behavior where needed - see Screen Reader Guidelines

Contrast & size compliance

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

Code

TBD

Current appearances in our products

Resources

https://tympanus.net/Development/TabStylesInspiration/

https://material.io/guidelines/components/tabs.html

Needs to be designed

Open issues

Maximum tab number - vertical and horizontal
Scroll tab - out of the window
Align tab solution between mobile and desktop (card / line)
Decide about maximum letter on title

Next Steps/Tasks

UX design
To see full view of tab with other components
General suggestion - implementation more interaction for update system to today design

New LUX design

<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">


<div class="card">
			<div class="card-header">Main Tabs <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<ul class="nav nav-tabs nav-tabs-sm nav-justified">
							  <li class="nav-item">
							    <a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
							  </li>
							</ul>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
	<li class="nav-item">
		<a class="nav-link active show" data-toggle="tab" href="#design">Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#collect">Collect</a>
	</li>
	<li class="nav-item">
		<a class="nav-link" data-toggle="tab" href="#analyze">Analyze</a>
	</li>
</ul>
<div class="tab-content">
	<div id="design" class="tab-pane fade active show"></div>
	<div id="collect" class="tab-pane fade"></div>
	<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<ul class="nav nav-tabs nav-tabs-sm nav-justified">
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
							  </li>
							  <li class="nav-item">
							    <a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
							  </li>
							</ul>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><ul class="nav nav-tabs nav-tabs-sm nav-justified">
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#design">Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#collect">Collect</a>
	</li>
	<li class="nav-item">
		<a class="nav-link disabled" data-toggle="tab" href="#analyze">Analyze</a>
	</li>
</ul>
<div class="tab-content">
	<div id="design" class="tab-pane fade active show"></div>
	<div id="collect" class="tab-pane fade"></div>
	<div id="analyze" class="tab-pane fade"></div>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>