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;
}
}