Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v3 v2 v1

Tabs

Tabs allow users to navigate between views within the same page or context.

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-tabs/pf-tabs.js';

Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.

Overview

Default

Users Users Containers Containers Focusable element Database Database Disabled Disabled

Installation

npm install @patternfly/elements

Usage

Each tab/panel pair consists of a pf-tab element, which must have the slot="tab" attribute, and a pf-tab-panel element, which should be a direct sibling of it's associated tab.

Users Users Containers Containers Database Database
View HTML Source 
<pf-tabs>
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">Containers</pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">Database</pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
</pf-tabs>

Reacting to changes

Listen for the expand event to react when a tab is selected.

HTML 
<script type="module">
  import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js'};

document.querySelector('pf-tabs')
.addEventListener('expand', function(event) {
if (PfTabs.isExpandEvent(event)) {
const pfTabs = event.target.closest('pf-tabs');
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
console.log(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>activeTab<span class="token punctuation">.</span>textContent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> tab activated!</span><span class="token template-punctuation string">);
}
});
</script>


<pf-tabs>
<pf-tab slot="tab">GPL</pf-tab>
<pf-tab-panel>Copyleft</pf-tab-panel>
<pf-tab slot="tab">MIT</pf-tab>
<pf-tab-panel>Open source</pf-tab-panel>
</pf-tabs>
 Lit 
import { html, render } from 'lit';
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js'};

function onExpand(event) {
  if (PfTabs.isExpandEvent(event)) {
    const pfTabs = event.target.closest('pf-tabs');
    const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
    console.log(`${activeTab.textContent} tab activated!`);
  }
}

render(html`
  <pf-tabs @expand="${onExpand}">
    <pf-tab slot="tab">GPL</pf-tab>
    <pf-tab-panel>Copyleft</pf-tab-panel>
    <pf-tab slot="tab">MIT</pf-tab>
    <pf-tab-panel>Open source</pf-tab-panel>
  </pf-tabs>
`, document.getElementById('container'));
 React 
import { Tabs, Tab, TabPanel } from '@patternfly/elements/react/pf-tabs/pf-tabs.js';
import { PfTabs } from '@patternfly/elements/pf-tabs/pf-tabs.js';

function onExpand(event) {
if (PfTabs.isExpandEvent(event)) {
const pfTabs = event.target.closest('pf-tabs');
const activeTab = pfTabs.tabs.at(pfTabs.activeTab)
console.log(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>activeTab<span class="token punctuation">.</span>textContent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> tab activated!</span><span class="token template-punctuation string">);
}
}


export const Expander = () => (
<Tabs onExpand={onExpand}>
<Tab slot="tab">GPL</Tab>
<TabPanel>Copyleft</TabPanel>
<Tab slot="tab">MIT</Tab>
<TabPanel>Open source</TabPanel>
</Tabs>
)

Variants

Box Light

Users Users Containers Containers Database Database Disabled Disabled
View HTML Source 
<pf-tabs box="light">
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">Containers</pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">Database</pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
  <pf-tab slot="tab" disabled>Disabled</pf-tab>
  <pf-tab-panel>Disabled</pf-tab-panel>
</pf-tabs>

Box Dark

Users Users Containers Containers Database Database Disabled Disabled
View HTML Source 
<pf-tabs box="dark">
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">Containers</pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">Database</pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
  <pf-tab slot="tab" disabled>Disabled</pf-tab>
  <pf-tab-panel>Disabled</pf-tab-panel>
</pf-tabs>

Vertical

Users Users Containers Containers Database Database Disabled Disabled
View HTML Source 
<pf-tabs vertical>
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">Containers</pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">Database</pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
  <pf-tab slot="tab" disabled>Disabled</pf-tab>
  <pf-tab-panel>Disabled</pf-tab-panel>
</pf-tabs>

Inset

Inset is implemented using CSS part ::part(tab-container)

<pf-tabs vertical class="inset-sm">
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
</pf-tabs>
.inset-sm::part(tabs-container) {
  --pf-c-tabs--inset: var(--pf-global--spacer--sm, 0.5rem);
  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm, 0.5rem);
  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm, 0.5rem);
}

Filled

Filled variant, each tab stretches to fill the available space for the tab set.

NOTE: Filled variant does not overflow.

Users Users Containers Containers Database Database
View HTML Source 
<pf-tabs fill>
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">Containers</pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">Database</pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
</pf-tabs>

Icons and text

pf-tab accepts a svg or pf-icon in the icon slot

<pf-tabs>
  <pf-tab slot="tab">
<svg slot="icon" slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 640 512" aria-hidden="true" role="img"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
<!-- or -->
<pf-icon slot="icon" set="fas" icon="users" size="sm" loading="idle"></pf-icon>
Users
  </pf-tab>
  ...
</pf-tabs>
Users Users Containers Containers Database Database Server Server System System Network Network
View HTML Source 
<pf-tabs>
  <pf-tab slot="tab">
    <pf-icon slot="icon" set="fas" icon="users" size="md" loading="idle"></pf-icon>
    Users
  </pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M509.5 184.6L458.9 32.8C452.4 13.2 434.1 0 413.4 0H272v192h238.7c-.4-2.5-.4-5-1.2-7.4zM240 0H98.6c-20.7 0-39 13.2-45.5 32.8L2.5 184.6c-.8 2.4-.8 4.9-1.2 7.4H240V0zM0 224v240c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V224H0z"></path></svg>
    Containers
  </pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 448 512" aria-hidden="true" role="img"><path d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"></path></svg>
    Database
  </pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg>
    Server
  </pf-tab>
  <pf-tab-panel>Server</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 640 512" aria-hidden="true" role="img"><path d="M624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg>
    System
  </pf-tab>
  <pf-tab-panel>System</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 640 512" aria-hidden="true" role="img"><path d="M384 320H256c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32zM192 32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v128c0 17.67 14.33 32 32 32h95.72l73.16 128.04C211.98 300.98 232.4 288 256 288h.28L192 175.51V128h224V64H192V32zM608 0H480c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32z"></path></svg>
    Network
  </pf-tab>
  <pf-tab-panel>Network</pf-tab-panel>
</pf-tabs>

Filled with Icons

Users Users Containers Containers Database Database
View HTML Source 
<pf-tabs fill>
  <pf-tab slot="tab">
    <svg slot="icon" slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 640 512" aria-hidden="true" role="img"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>
    Users
  </pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M509.5 184.6L458.9 32.8C452.4 13.2 434.1 0 413.4 0H272v192h238.7c-.4-2.5-.4-5-1.2-7.4zM240 0H98.6c-20.7 0-39 13.2-45.5 32.8L2.5 184.6c-.8 2.4-.8 4.9-1.2 7.4H240V0zM0 224v240c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V224H0z"></path></svg>
    Containers
  </pf-tab>
  <pf-tab-panel>Containers</pf-tab-panel>
  <pf-tab slot="tab">
    <svg slot="icon" style="vertical-align:-0.125em" fill="currentColor" height="1em" width="1em" viewBox="0 0 448 512" aria-hidden="true" role="img"><path d="M448 73.143v45.714C448 159.143 347.667 192 224 192S0 159.143 0 118.857V73.143C0 32.857 100.333 0 224 0s224 32.857 224 73.143zM448 176v102.857C448 319.143 347.667 352 224 352S0 319.143 0 278.857V176c48.125 33.143 136.208 48.572 224 48.572S399.874 209.143 448 176zm0 160v102.857C448 479.143 347.667 512 224 512S0 479.143 0 438.857V336c48.125 33.143 136.208 48.572 224 48.572S399.874 369.143 448 336z"></path></svg>
    Database
  </pf-tab>
  <pf-tab-panel>Database</pf-tab-panel>
</pf-tabs>

Slots

tab

Must contain one or more <pf-tab>

Default Slot

Must contain one or more <pf-panel>

Slots on pf-tab

icon

Can contain an <svg> or <pf-icon>

Default Slot

Tab title text

Slots on pf-tab-panel

Default Slot

Tab panel content

Attributes

label-scroll-left

Aria Label for the left scroll button

DOM Property
labelScrollLeft
Type
string
Default
'Scroll left'
label-scroll-right

Aria Label for the right scroll button

DOM Property
labelScrollRight
Type
string
Default
'Scroll left'
box

Box styling on tabs. Defaults to null

DOM Property
box
Type
'light' | 'dark' | null
Default
null
vertical

Set to true to enable vertical tab styling.

DOM Property
vertical
Type
boolean
Default
false
fill

Set to true to enable filled tab styling.

DOM Property
fill
Type
boolean
Default
false
border-bottom

Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.

DOM Property
borderBottom
Type
'true' | 'false'
Default
'true'
manual

Set's the tabs to be manually activated. This means that the tabs will not automatically select unless a user clicks on them or uses the keyboard space or enter key to select them. Roving tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.

DOM Property
manual
Type
boolean
Default
false
active-index

The index of the active tab

DOM Property
activeIndex
Type
unknown
Default
unknown

Events

expand

when a tab expands

Event Type: 
TabExpandEvent

CSS Custom Properties

CSS Property Description Default
--pf-c-tabs--Width auto
--pf-c-tabs--inset 0
--pf-c-tabs--before--BorderColor #d2d2d2
--pf-c-tabs--before--BorderTopWidth 0
--pf-c-tabs--before--BorderRightWidth 0
--pf-c-tabs--before--BorderBottomWidth 1px
--pf-c-tabs--before---BorderLeftWidth 0
--pf-c-tabs--m-vertical--MaxWidth 15.625rem
--pf-c-tabs--m-vertical__list--before--BorderColor #d2d2d2
--pf-c-tabs--m-vertical__list--before--BorderTopWidth 0
--pf-c-tabs--m-vertical__list--before--BorderRightWidth 0
--pf-c-tabs--m-vertical__list--before--BorderBottomWidth 0
--pf-c-tabs--m-vertical__list--before--BorderLeftWidth 1px
--pf-c-tabs--m-vertical--m-box--inset 2rem
--pf-c-tabs__list--Display flex
--pf-c-tabs__scroll-button--Width 3rem
--pf-c-tabs__scroll-button--Color #151515
--pf-c-tabs__scroll-button--BackgroundColor #ffffff
--pf-c-tabs__scroll-button--OutlineOffset -0.25rem
--pf-c-tabs__scroll-button--TransitionDuration--margin .125s
--pf-c-tabs__scroll-button--TransitionDuration--transform .125s
--pf-c-tabs__scroll-button--hover--Color #06c
--pf-c-tabs__scroll-button--before--BorderColor #d2d2d2
--pf-c-tabs__scroll-button--before--BorderRightWidth 0
--pf-c-tabs__scroll-button--before--BorderBottomWidth 1px
--pf-c-tabs__scroll-button--before--BorderLeftWidth 0
--pf-c-tabs__scroll-button--before--border-width--base 1px
--pf-c-tabs__scroll-button--disabled--Color #d2d2d2

CSS Properties on pf-tab

CSS Property Description Default
--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth 1px
--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth 1px
--pf-c-tabs__link--BackgroundColor #f0f0f0
--pf-c-tabs__link--disabled--BackgroundColor #d2d2d2
--pf-c-tabs__link--before--BorderTopWidth 1px
--pf-c-tabs__link--before--BorderBottomWidth 1px
--pf-c-tabs__link--before--BorderLeftWidth 0
--pf-c-tabs__link--before--BorderRightWidth 1px
--pf-c-tabs__link--disabled--before--BorderRightWidth 1px
--pf-c-tabs__link--after--Top auto
--pf-c-tabs__link--after--Right 0
--pf-c-tabs__link--after--Bottom 0
--pf-c-tabs__link--before--Left 0
--pf-c-tabs__link--PaddingTop 1rem
--pf-c-tabs__link--PaddingBottom 1rem
--pf-c-tabs__link--disabled--before--BorderBottomWidth 1px
--pf-c-tabs__link--disabled--before--BorderLeftWidth 1px
--pf-c-tabs__link--before--BorderTopColor #d2d2d2
--pf-c-tabs__link--before--BorderRightColor #d2d2d2
--pf-c-tabs__link--before--BorderBottomColor #d2d2d2
--pf-c-tabs__link--before--BorderLeftColor #d2d2d2
--pf-c-tabs__link--FontSize 1rem
--pf-c-tabs__link--Color #6a6e73
--pf-c-tabs__link--OutlineOffset -0.375rem
--pf-c-tabs__link--after--BorderColor #b8bbbe
--pf-c-tabs__link--after--BorderTopWidth 0
--pf-c-tabs__link--after--BorderRightWidth 0
--pf-c-tabs__link--after--BorderBottomWidth 0
--pf-c-tabs__link--after--BorderLeftWidth 0
--pf-c-tabs__item--m-current__link--Color #151515
--pf-c-tabs__item--m-current__link--after--BorderColor #06c
--pf-c-tabs__item--m-current__link--after--BorderWidth 3px
--pf-c-tabs__link--child--MarginRight 1rem

CSS Properties on pf-tab-panel

CSS Property Description Default
--pf-c-tab-content--m-light-300 #f0f0f0

CSS Shadow Parts

container

outer container

tabs-container

tabs container

tabs

tablist

panels

panels

Parts on pf-tab

button

button element

icon

span container for the icon

text

span container for the title text

Parts on pf-tab-panel

container

container for the panel content

© 2018-2024 Red Hat, Inc. Deploys by Netlify