Tabs are used to organize related content. They allow the user to navigate between groups of information that appear within the same context.
Use tabs to group related information into different categories, helping to reduce cognitive load. Tabs can be used to organize content such as forms, settings, and dashboards so a user does not have to navigate away from their workflow to complete their task. The default active tab starts on the left.
<div class="wtw-tabs col-12">
<div class="wtw-tabs-wrapper">
<div class="wtw-tabs-fader"></div>
<nav>
<ul role="tablist" class="wtw-tabs-nav">
<li role="presentation">
<button aria-controls="TAB_PANEL_1_ID" role="tab" aria-selected="true" tabindex="0">
<span>Testing Tab 1</span>
</button>
</li>
<li role="presentation">
<button aria-controls="TAB_PANEL_2_ID" role="tab" aria-selected="false" tabindex="0">
<span>Testing Tab 2</span>
</button>
</li>
<li role="presentation">
<button aria-controls="TAB_PANEL_3_ID" role="tab" aria-selected="false" tabindex="0">
<span>Testing Tab 3</span>
</button>
</li>
<li role="presentation">
<button aria-controls="TAB_PANEL_4_ID" role="tab" aria-selected="false" tabindex="0">
<span>Testing Tab 4</span>
</button>
</li>
<li role="presentation">
<button aria-controls="TAB_PANEL_5_ID" role="tab" aria-selected="false" tabindex="0">
<span>Testing Tab 5</span>
</button>
</li>
</ul>
</nav>
</div>
<div id="TAB_PANEL_1_ID" class="row wtw-tabs-panel" aria-hidden="false">
<div class="col-12">
<h5>TAB_PANEL_1_ID</h5>
<p>
Consectetur adipiscing elit. Sed porttitor justo id cursus lacinia. Duis
ut sollicitudin mi, quis tristique elit. Nullam a libero consequat,
tristique enim a, mattis purus. In eleifend, nisi sit amet commodo
fringilla, tellus massa suscipit urna, sit amet ornare neque eros at
nulla. Curabitur convallis erat sit amet ex commodo, et varius neque
fringilla. Suspendisse scelerisque, leo ut sodales ultricies, enim libero
cursus magna, sed elementum nisi lacus et metus. Etiam et mauris sit amet
justo maximus egestas. Pellentesque fermentum suscipit commodo. Vivamus
efficitur, nibh et malesuada maximus, urna sapien condimentum nisl, in
lacinia metus nisl vel justo. Sed at nulla fringilla, euismod lacus quis,
blandit risus. Mauris id tortor odio. Proin egestas orci ipsum, non
laoreet turpis lobortis in. Donec consectetur ex ac orci interdum, ut
sollicitudin est sodales. Aliquam consectetur gravida sollicitudin.
Vestibulum ut ornare lacus. Cras at libero nisl.
</p>
<p><a href="#">keyboard nav test Link 1</a></p>
</div>
</div>
<div id="TAB_PANEL_2_ID" class="row wtw-tabs-panel" aria-hidden="true">
<div class="col-12">
<h5>TAB_PANEL_2_ID</h5>
<p>
Justo id cursus lacinia. Duis ut sollicitudin mi, quis tristique elit.
Nullam a libero consequat, tristique enim a, mattis purus. In eleifend,
nisi sit amet commodo fringilla, tellus massa suscipit urna, sit amet
ornare neque eros at nulla. Curabitur convallis erat sit amet ex commodo,
et varius neque fringilla. Suspendisse scelerisque, leo ut sodales
ultricies, enim libero cursus magna, sed elementum nisi lacus et metus.
Etiam et mauris sit amet justo maximus egestas. Pellentesque fermentum
suscipit commodo. Vivamus efficitur, nibh et malesuada maximus, urna
sapien condimentum nisl, in lacinia metus nisl vel justo. Sed at nulla
fringilla, euismod lacus quis, blandit risus. Mauris id tortor odio. Proin
egestas orci ipsum, non laoreet turpis lobortis in. Donec consectetur ex
ac orci interdum, ut sollicitudin est sodales. Aliquam consectetur gravida
sollicitudin. Vestibulum ut ornare lacus. Cras at libero nisl.
</p>
<p><a href="#">keyboard nav test Link 2</a></p>
</div>
</div>
<div id="TAB_PANEL_3_ID" class="row wtw-tabs-panel" aria-hidden="true">
<div class="col-12">
<h5>TAB_PANEL_3_ID</h5>
<p>
Libero consequat, tristique enim a, mattis purus. In eleifend, nisi sit
amet commodo fringilla, tellus massa suscipit urna, sit amet ornare neque
eros at nulla. Curabitur convallis erat sit amet ex commodo, et varius
neque fringilla. Suspendisse scelerisque, leo ut sodales ultricies, enim
libero cursus magna, sed elementum nisi lacus et metus. Etiam et mauris
sit amet justo maximus egestas. Pellentesque fermentum suscipit commodo.
Vivamus efficitur, nibh et malesuada maximus, urna sapien condimentum
nisl, in lacinia metus nisl vel justo. Sed at nulla fringilla, euismod
lacus quis, blandit risus. Mauris id tortor odio. Proin egestas orci
ipsum, non laoreet turpis lobortis in. Donec consectetur ex ac orci
interdum, ut sollicitudin est sodales. Aliquam consectetur gravida
sollicitudin. Vestibulum ut ornare lacus. Cras at libero nisl.
</p>
<p><a href="#">keyboard nav test Link 3</a></p>
</div>
</div>
<div id="TAB_PANEL_4_ID" class="row wtw-tabs-panel" aria-hidden="true">
<div class="col-12">
<h5>TAB_PANEL_4_ID</h5>
<p>
Dit amet, consectetur adipiscing elit. Sed porttitor justo id cursus
lacinia. Duis ut sollicitudin mi, quis tristique elit. Nullam a libero
consequat, tristique enim a, mattis purus. In eleifend, nisi sit amet
commodo fringilla, tellus massa suscipit urna, sit amet ornare neque eros
at nulla. Curabitur convallis erat sit amet ex commodo, et varius neque
fringilla. Suspendisse scelerisque, leo ut sodales ultricies, enim libero
cursus magna, sed elementum nisi lacus et metus. Etiam et mauris sit amet
justo maximus egestas. Pellentesque fermentum suscipit commodo. Vivamus
efficitur, nibh et malesuada maximus, urna sapien condimentum nisl, in
lacinia metus nisl vel justo. Sed at nulla fringilla, euismod lacus quis,
blandit risus. Mauris id tortor odio. Proin egestas orci ipsum, non
laoreet turpis lobortis in. Donec consectetur ex ac orci interdum, ut
sollicitudin est sodales. Aliquam consectetur gravida sollicitudin.
Vestibulum ut ornare lacus. Cras at libero nisl.
</p>
<p><a href="#">keyboard nav test Link 4</a></p>
</div>
</div>
<div id="TAB_PANEL_5_ID" class="row wtw-tabs-panel" aria-hidden="true">
<div class="col-12">
<h5>TAB_PANEL_5_ID</h5>
<p>
Ut sollicitudin mi, quis tristique elit. Nullam a libero consequat,
tristique enim a, mattis purus. In eleifend, nisi sit amet commodo
fringilla, tellus massa suscipit urna, sit amet ornare neque eros at
nulla. Curabitur convallis erat sit amet ex commodo, et varius neque
fringilla. Suspendisse scelerisque, leo ut sodales ultricies, enim libero
cursus magna, sed elementum nisi lacus et metus. Etiam et mauris sit amet
justo maximus egestas. Pellentesque fermentum suscipit commodo. Vivamus
efficitur, nibh et malesuada maximus, urna sapien condimentum nisl, in
lacinia metus nisl vel justo. Sed at nulla fringilla, euismod lacus quis,
blandit risus. Mauris id tortor odio. Proin egestas orci ipsum, non
laoreet turpis lobortis in. Donec consectetur ex ac orci interdum, ut
sollicitudin est sodales. Aliquam consectetur gravida sollicitudin.
Vestibulum ut ornare lacus. Cras at libero nisl.
</p>
<p><a href="#">keyboard nav test Link 5</a></p>
</div>
</div>
</div>