Description

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects.

Verint LUX Design System > Tabs > 01_Regular.png

Types

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

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

There's always one tab selected at a time

Structure Elements

Tab item
- Display a navigation text element arranged together with the active/inactive highlighted
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.

Content

The label 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

Default

By default, the left tab is the first tab show as open. This is the initial setting provided by the control.
Note: Technically, you can also override the initial selection. However, this is not recommended.

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

States

zRegular
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

Validations and errors

Tab item error
Tab item warning

Best practices

Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in the tab label
A maximum of six tabs is recommended. This is to maintain an uncluttered UI and reduce cognitive load for users.
In the details pane, a maximum of four tabs is recommended.
Use clear and short labels
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 solutioan 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>