Description

Tabs are used to quickly switching between views within the same context. Allowing user for dual screen support, and workspace customisation.

TBD

Related items:

Lorem ipsum dolor si

Types

Type	Usage
Main Tabs	Tabbed navigation - Single row above their associated content
2nd Level Tabs	Single row above their associated content
Details Pane Tabs
Ribbon Tabs

Behavior

Text

Each tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum.
Icons are not permitted in tab labels.

Number of tabs

A maximum of four tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.

Order

Tab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.

Verint LUX Design System > Tabs > Screen Shot 2019-04-22 at 11.29.49.png

States

Main tabs
2nd level tabs
Details pane tabs

Ribbon tabs

Current appearances in our products

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>