tab navigation
Tab Navigations can have tabs that are all with Labels and Icons or with either Labels or Icons, but not mixed. Individual tabs can be disabled.
If a tab is selected it would have the helper class -selected
. Only one Tab can be selected at a time, and disabled tabs cannot be selected.
You can choose to use <a>
or <button>
tags as tabs; the former choice will have no additional functionality. When using <button>
, see below for the callback API.
table of content
component variations
tabs with labels
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="1"
tabindex="0"
role="tab"
aria-controls="tab-1"
id="tab-1"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">Tab 1</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="2"
tabindex="0"
role="tab"
aria-controls="tab-2"
id="tab-2"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">Tab 2</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="3"
tabindex="0"
role="tab"
aria-controls="tab-3"
id="tab-3"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">
This is a Tab with a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="4"
tabindex="0"
role="tab"
aria-controls="tab-4"
id="tab-4"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">Tab 4</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="5"
tabindex="0"
role="tab"
aria-controls="tab-5"
id="tab-5"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">
This is another Tab with a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="6"
tabindex="0"
role="tab"
aria-controls="tab-6"
id="tab-6"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">
This is the last Tab with a long label
</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
tabs with labels and icons
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="7"
tabindex="0"
role="tab"
aria-controls="tab-7"
id="tab-7"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">Tab 7</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="8"
tabindex="0"
role="tab"
aria-controls="tab-8"
id="tab-8"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">Tab 8</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="9"
tabindex="0"
role="tab"
aria-controls="tab-9"
id="tab-9"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">Tab 9</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="10"
tabindex="0"
role="tab"
aria-controls="tab-10"
id="tab-10"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is a Tab with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="11"
tabindex="0"
role="tab"
aria-controls="tab-11"
id="tab-11"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is another Tab with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="12"
tabindex="0"
role="tab"
aria-controls="tab-12"
id="tab-12"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is the last Tab with an icon and a long label
</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
tabs with icons
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="13"
tabindex="0"
role="tab"
aria-controls="tab-13"
id="tab-13"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="14"
tabindex="0"
role="tab"
aria-controls="tab-14"
id="tab-14"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-battery-2"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="15"
tabindex="0"
role="tab"
aria-controls="tab-15"
id="tab-15"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-books"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="16"
tabindex="0"
role="tab"
aria-controls="tab-16"
id="tab-16"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-clock"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="17"
tabindex="0"
role="tab"
aria-controls="tab-17"
id="tab-17"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-delivery"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="18"
tabindex="0"
role="tab"
aria-controls="tab-18"
id="tab-18"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-externallink"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="19"
tabindex="0"
role="tab"
aria-controls="tab-19"
id="tab-19"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-glossary"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="20"
tabindex="0"
role="tab"
aria-controls="tab-20"
id="tab-20"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="21"
tabindex="0"
role="tab"
aria-controls="tab-21"
id="tab-21"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-battery-2"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="22"
tabindex="0"
role="tab"
aria-controls="tab-22"
id="tab-22"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-books"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="23"
tabindex="0"
role="tab"
aria-controls="tab-23"
id="tab-23"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-clock"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="24"
tabindex="0"
role="tab"
aria-controls="tab-24"
id="tab-24"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-delivery"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="25"
tabindex="0"
role="tab"
aria-controls="tab-25"
id="tab-25"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-externallink"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="26"
tabindex="0"
role="tab"
aria-controls="tab-26"
id="tab-26"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-glossary"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="27"
tabindex="0"
role="tab"
aria-controls="tab-27"
id="tab-27"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="28"
tabindex="0"
role="tab"
aria-controls="tab-28"
id="tab-28"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-battery-2"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="29"
tabindex="0"
role="tab"
aria-controls="tab-29"
id="tab-29"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-books"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="30"
tabindex="0"
role="tab"
aria-controls="tab-30"
id="tab-30"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-clock"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="31"
tabindex="0"
role="tab"
aria-controls="tab-31"
id="tab-31"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-delivery"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="32"
tabindex="0"
role="tab"
aria-controls="tab-32"
id="tab-32"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-externallink"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="33"
tabindex="0"
role="tab"
aria-controls="tab-33"
id="tab-33"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-glossary"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="34"
tabindex="0"
role="tab"
aria-controls="tab-34"
id="tab-34"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="35"
tabindex="0"
role="tab"
aria-controls="tab-35"
id="tab-35"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-battery-2"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="36"
tabindex="0"
role="tab"
aria-controls="tab-36"
id="tab-36"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-books"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="37"
tabindex="0"
role="tab"
aria-controls="tab-37"
id="tab-37"
>
<span class="a-tab-navigation__tab-content">
<i class="a-icon a-tab-navigation__icon boschicon-bosch-ic-clock"></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="38"
tabindex="0"
role="tab"
aria-controls="tab-38"
id="tab-38"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-delivery"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="39"
tabindex="0"
role="tab"
aria-controls="tab-39"
id="tab-39"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-externallink"
></i>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -only-icon"
data-frok-tab-identifier="40"
tabindex="0"
role="tab"
aria-controls="tab-40"
id="tab-40"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-glossary"
></i>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
tabs with labels and icons, 3rd disabled
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="41"
tabindex="0"
role="tab"
aria-controls="tab-41"
id="tab-41"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is a Tab</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="42"
tabindex="0"
role="tab"
aria-controls="tab-42"
id="tab-42"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is another Tab</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -disabled"
data-frok-tab-identifier="43"
tabindex="-1"
role="tab"
aria-disabled="true"
aria-controls="tab-43"
id="tab-43"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is the 3rd Tab</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="44"
tabindex="0"
role="tab"
aria-controls="tab-44"
id="tab-44"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is a Tab with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="45"
tabindex="0"
role="tab"
aria-controls="tab-45"
id="tab-45"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is another Tab with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="46"
tabindex="0"
role="tab"
aria-controls="tab-46"
id="tab-46"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is the last Tab with an icon and a long label
</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
tab links with labels
This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-47"
id="tab-47"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">This is a Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-48"
id="tab-48"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">This is another Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-49"
id="tab-49"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">This is the 3rd Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="50"
tabindex="0"
role="tab"
aria-controls="tab-50"
id="tab-50"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is a Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="51"
tabindex="0"
role="tab"
aria-controls="tab-51"
id="tab-51"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is another Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="52"
tabindex="0"
role="tab"
aria-controls="tab-52"
id="tab-52"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is the last Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
tab links with labels and icons
This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels-and-icons"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-53"
id="tab-53"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is a Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels-and-icons"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-54"
id="tab-54"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is another Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels-and-icons"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-55"
id="tab-55"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is the 3rd Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="56"
tabindex="0"
role="tab"
aria-controls="tab-56"
id="tab-56"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is a Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="57"
tabindex="0"
role="tab"
aria-controls="tab-57"
id="tab-57"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is another Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="58"
tabindex="0"
role="tab"
aria-controls="tab-58"
id="tab-58"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is the last Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
tab links with labels and icons, 3rd disabled
This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels-and-icons-3rd-disabled"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-59"
id="tab-59"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is a Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels-and-icons-3rd-disabled"
class="a-tab-navigation__tab"
tabindex="0"
role="tab"
aria-controls="tab-60"
id="tab-60"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is another Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<a
href="#tab-links-with-labels-and-icons-3rd-disabled"
class="a-tab-navigation__tab -disabled"
tabindex="-1"
role="tab"
aria-disabled="true"
aria-controls="tab-61"
id="tab-61"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">This is the 3rd Tab Link</span>
</span>
</a>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="62"
tabindex="0"
role="tab"
aria-controls="tab-62"
id="tab-62"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is a Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="63"
tabindex="0"
role="tab"
aria-controls="tab-63"
id="tab-63"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is another Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="64"
tabindex="0"
role="tab"
aria-controls="tab-64"
id="tab-64"
>
<span class="a-tab-navigation__tab-content">
<i
class="a-icon a-tab-navigation__icon boschicon-bosch-ic-emoji-happy"
></i>
<span class="a-tab-navigation__label">
This is the last Tab Link with an icon and a long label
</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
Demo: simple tabbed content
Content 1
<div class="frontend-kit-example_tabbed-content">
<div class="a-tab-navigation__wrapper">
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-left"
aria-label="scroll to left"
>
<i class="a-icon a-button__icon ui-ic-left-small"></i>
</button>
<ol class="a-tab-navigation" role="tablist">
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab -selected"
data-frok-tab-identifier="content-1"
tabindex="0"
role="tab"
aria-controls="tab-content-1"
id="tab-content-1"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">Content 1</span>
</span>
</button>
</li>
<li class="a-tab-navigation__item" role="none">
<button
type="button"
class="a-tab-navigation__tab"
data-frok-tab-identifier="content-2"
tabindex="0"
role="tab"
aria-controls="tab-content-2"
id="tab-content-2"
>
<span class="a-tab-navigation__tab-content">
<span class="a-tab-navigation__label">Content 2</span>
</span>
</button>
</li>
</ol>
<button
type="button"
class="a-button a-button--integrated -without-label a-tab-navigation__button-right"
aria-label="scroll to right"
>
<i class="a-icon a-button__icon ui-ic-right-small"></i>
</button>
</div>
<div
class="frontend-kit-example_content"
style="text-align:center"
data-frok-content-identifier="content-1"
id="panel-1"
aria-labelledby="panel-1"
role="tabpanel"
>
<p>Content 1</p>
</div>
<div
class="frontend-kit-example_content"
style="text-align:center;display:none"
data-frok-content-identifier="content-2"
id="panel-2"
aria-labelledby="panel-2"
role="tabpanel"
>
<p>Content 2</p>
</div>
</div>
additional content
Event API
Event Handlers can be registered by calling component.addEventListener(name, callback)
. They can be removed by calling component.removeEventListener(name, callback)
with the same arguments. Also, addEventListener
returns an unsubscription function that, once called, achieves the same.
Event Name | parameters | description |
---|---|---|
selected |
id: string |
Will be triggered when the active tab changes. id is the identifier given with the data-frok-tab-identifier attribute. |
demo
import TabNavigation from '.';
import ElementWithComponent from '../../ElementWithComponent';
export default (): void => {
const contents = Array.from(
document.querySelectorAll(
'.frontend-kit-example_tabbed-content .frontend-kit-example_content',
),
) as HTMLDivElement[];
const tabs = document.querySelector(
'.frontend-kit-example_tabbed-content .a-tab-navigation',
);
if (tabs) {
const { component } = tabs as ElementWithComponent<TabNavigation>;
component.addEventListener('selected', (id: string) => {
contents.forEach(content => {
if (content.dataset.frokContentIdentifier === id) {
/* eslint-disable-next-line no-param-reassign */
content.style.display = 'block';
} else {
/* eslint-disable-next-line no-param-reassign */
content.style.display = 'none';
}
});
});
}
};
styles SCSS
.a-tab-navigation {
// Define the navigation itself
background-color: var(--integrated__enabled__fill__default);
border-bottom: 1px solid var(--integrated__enabled__front__default);
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding: 0;
position: relative;
scrollbar-width: none; // Hide native scrollbar on Firefox
width: 100%;
// Hide native scrollbar on Chrome, Edge and Safari
&::-webkit-scrollbar {
/* stylelint-disable-line */
height: 0;
}
// in FF, the ol element is focusable -> provide a proper focus for that case
&:focus-visible {
@include focus-inside;
}
// Define the wrapper
&__wrapper {
position: relative;
margin-top: 1em;
margin-bottom: 1em;
}
// Reset the li elements
&__item {
margin: 0;
padding: 0;
/* stylelint-disable-next-line a11y/content-property-no-static-value */
&::before {
content: none;
}
}
// Reset the button elements
button {
background: none;
border: 0;
color: var(--integrated__enabled__front__default);
&:focus-visible {
@include focus-inside;
}
}
// Reset the links elements
a {
text-decoration: none;
display: inline-block;
color: var(--integrated__enabled__front__default);
&:focus-visible {
@include focus-inside;
}
}
&__button-left,
&__button-right {
position: absolute;
display: none;
top: 0;
background-color: var(--background);
height: calc(100% - 1px);
&:hover,
&:active {
background-color: var(--background);
}
&:focus-visible {
position: absolute;
}
&.a-button .a-button__icon {
display: inline-block;
padding: 0.75rem 0.25rem 0.625rem 0.25rem;
}
}
&__button-left {
left: 0;
z-index: 1;
}
&__button-right {
right: 0;
}
&--scrollLeft {
.a-tab-navigation__button-left {
display: block;
}
}
&--scrollRight {
.a-tab-navigation__button-right {
display: block;
}
}
&__tab {
cursor: pointer;
padding: 0.75rem 1rem 0;
white-space: nowrap;
&:hover {
color: var(--integrated__enabled__front__hovered);
background-color: var(--integrated__enabled__fill__hovered);
}
&:active {
color: var(--integrated__enabled__front__pressed);
background-color: var(--integrated__enabled__fill__pressed);
}
&.-disabled {
color: var(--integrated__disabled__front__default);
background-color: var(--integrated__disabled__fill__default);
cursor: default;
pointer-events: none;
}
&.-selected {
color: var(--minor-accent__enabled__front__default);
background-color: var(--minor-accent__enabled__fill__default);
}
&.-selected:hover {
color: var(--minor-accent__enabled__front__hovered);
}
&.-selected:active {
color: var(--minor-accent__enabled__front__pressed);
}
&.-only-icon {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
&__tab-content {
display: inline-flex;
align-items: center;
letter-spacing: 0;
border: 0;
border-bottom: solid 0.125rem var(--integrated__enabled__fill__default);
// The value below is the result of the following calculation.
// Total height (48px) - Padding top (12px) - Line height (24px) -
// Border bottom (2px) - Outer border of the ordered list (1px)
padding-bottom: 0.5625rem;
}
.-selected &__tab-content {
border-color: var(--minor-accent__enabled__front__default);
&:hover {
border-color: var(--minor-accent__enabled__front__hovered);
}
&:active {
border-color: var(--minor-accent__enabled__front__pressed);
}
}
&__icon + &__label {
text-align: left;
margin-left: 0.5rem;
}
&__icon {
font-size: 1.5rem;
}
}