PF Next

Tabs

Primary tabs with sections

Preview

Tab 1 section
<div class="pf-c-tabs" aria-label="Primary tabs with sections example">
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll left">
    <i class="fas fa-angle-left" hidden></i>
  </button>
  <ul class="pf-c-tabs__list">
    <li class="pf-c-tabs__item pf-m-current">
      <button class="pf-c-tabs__button" id="ex1-tab1" aria-controls="ex1-section1">
        Tab item 1
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex1-tab2" aria-controls="ex1-section2">
        Tab item 2
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex1-tab3" aria-controls="ex1-section3">
        Tab item 3
      </button>
    </li>
  </ul>
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
    <i class="fas fa-angle-right" hidden></i>
  </button>
</div>
<section class="pf-c-tabs__section" id="ex1-section1" aria-labelledby="ex1-tab1">
  Tab 1 section
</section>
<section class="pf-c-tabs__section" id="ex1-section2" aria-labelledby="ex1-tab2" hidden>
  Tab 2 section
</section>
<section class="pf-c-tabs__section" id="ex1-section3" aria-labelledby="ex1-tab3" hidden>
  Tab 3 section
</section>

Accessibility

Attribute Applied To Outcome
aria-controls="tabsection1" .pf-c-tabs__button Identifies the section controlled by the tab. Required
aria-labelledby="tab1" section Identifies the tab associated with the section. Required
hidden section Indicates that a tab panel is not currently active. Required

Usage

Attribute Applied To Outcome
.pf-c-tabs <div> Creates a tab component. Required
.pf-c-tabs__scroll-button <button> Creates a scroll button. Required
.pf-c-tabs__list <ul> Creates a tab list. Required
.pf-c-tabs__item <li> Creates a tab item. Required
.pf-c-tabs__button <button> Creates a tab button. Required
id="tab1" .pf-c-tabs__button Uniquely identifies the tab. Required

Modifiers

Class Applied To Outcome
.pf-m-current .pf-c-tabs__item Highlights the current tab.

Scroll buttons

Preview

<div class="pf-c-tabs pf-m-start pf-m-start-current pf-m-end" aria-label="Scroll buttons example">
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll left">
    <i class="fas fa-angle-left" hidden></i>
  </button>
  <ul class="pf-c-tabs__list">
    <li class="pf-c-tabs__item pf-m-current">
      <button class="pf-c-tabs__button" id="ex2-tab1">
        Tab item 1
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab2">
        Tab item 2
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab3">
        Tab item 3
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab4">
        Tab item 4
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab5">
        Tab item 5
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab6">
        Tab item 6
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab7">
        Tab item 7
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab8">
        Tab item 8
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab9">
        Tab item 9
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex2-tab10">
        Tab item 10
      </button>
    </li>
  </ul>
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
    <i class="fas fa-angle-right" hidden></i>
  </button>
</div>

Note

Whenever a .pf-m-current tab is scrolled beyond the width of the container, the appropriate scroll button should be highlighted using .pf-m-start-current or .pf-m-end-current to indicate that the current tab exists in that direction.

Modifiers

Class Applied To Outcome
.pf-m-start .pf-c-tabs Enables the first directional scroll button.
.pf-m-start-current .pf-c-tabs Highlights the first directional scroll button.
.pf-m-end .pf-c-tabs Enables the second directional scroll button.
.pf-m-end-current .pf-c-tabs Highlights the second directional scroll button.

Primary tabs with secondary tabs

Preview

<div class="pf-c-tabs" aria-label="Primary tabs example">
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll left">
    <i class="fas fa-angle-left" hidden></i>
  </button>
  <ul class="pf-c-tabs__list">
    <li class="pf-c-tabs__item pf-m-current">
      <button class="pf-c-tabs__button" id="ex3-tab1">
        Tab item 1
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex3-tab2">
        Tab item 2
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex3-tab3">
        Tab item 3
      </button>
    </li>
  </ul>
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
    <i class="fas fa-angle-right" hidden></i>
  </button>
</div>
<div class="pf-c-tabs pf-m-tabs-secondary" aria-label="Secondary tabs example">
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll left">
    <i class="fas fa-angle-left" hidden></i>
  </button>
  <ul class="pf-c-tabs__list">
    <li class="pf-c-tabs__item pf-m-current">
      <button class="pf-c-tabs__button" id="ex3-secondary-tab1">
        Secondary tab item 1
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex3-secondary-tab2">
        Secondary tab item 2
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex3-secondary-tab3">
        Secondary tab item 3
      </button>
    </li>
  </ul>
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
    <i class="fas fa-angle-right" hidden></i>
  </button>
</div>

Note

Secondary tabs can be placed as an independent component anywhere within an interface. If placed directly adjacent to a set of primary tabs, they adopt a small amount of styling to properly align the two tab sets.

If secondary tabs cannot be placed directly adjacent to primary tabs, .pf-m-tabs-secondary can be applied to a directly adjacent container <div> with .pf-c-tabs as a child to achieve the same effect.

Modifiers

Class Applied To Outcome
.pf-m-tabs-secondary .pf-c-tabs or <div> Creates a secondary tabs component. Required

Filled tabs

Preview

<div class="pf-c-tabs pf-m-fill" aria-label="Filled tabs example">
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll left">
    <i class="fas fa-angle-left" hidden></i>
  </button>
  <ul class="pf-c-tabs__list">
    <li class="pf-c-tabs__item pf-m-current">
      <button class="pf-c-tabs__button" id="ex4-tab1">
        Tab item 1
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex4-tab2">
        Tab item 2
      </button>
    </li>
    <li class="pf-c-tabs__item">
      <button class="pf-c-tabs__button" id="ex4-tab3">
        Tab item 3
      </button>
    </li>
  </ul>
  <button class="pf-c-tabs__scroll-button" aria-label="Scroll right">
    <i class="fas fa-angle-right" hidden></i>
  </button>
</div>

Modifiers

Class Applied To Outcome
.pf-m-fill .pf-c-tabs Enables the filled tab list layout. Required

Documentation

Overview

Tabs should only be used to change content views within a page. The similar-looking but semantically different Horizontal Nav component is available for general navigation use cases.