PatternFly Elements - Home PatternFly Elements

Tabs

Overview

Tabs allow users to navigate between views within the same page or context. Variants include horizontal, vertical, inset, and filled. Most tab variations are available as open (default) or box style tabs. Box style tabs also feature a light and dark variation.

Default

Users Users Containers Containers Focusable element Database Database Disabled Disabled Aria Disabled Aria 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.

<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-tab slot="tab" disabled>Disabled</pf-tab>
  <pf-tab-panel>Disabled</pf-tab-panel>
  <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
  <pf-tab-panel>Aria Disabled</pf-tab-panel>
</pf-tabs>

Variants

Box Light

Users Users Containers Containers Database Database Disabled Disabled Aria Disabled Aria Disabled 
  <pf-tabs box="light">...</pf-tabs>

Box Dark

Users Users Containers Containers Database Database Disabled Disabled Aria Disabled Aria Disabled 
  <pf-tabs box="dark">...</pf-tabs>

Vertical

Users Users Containers Containers Database Database Disabled Disabled Aria Disabled Aria Disabled 
  <pf-tabs vertical>...</pf-tabs>

Inset

Inset is implemented using CSS part tab-container

.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);
}
<pf-tabs vertical class="inset-sm">
  <pf-tab slot="tab">Users</pf-tab>
  <pf-tab-panel>Users</pf-tab-panel>
</pf-tabs>

Filled

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

Users Users Containers Containers Database Database 
  <pf-tabs filled>...</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 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

Filled with Icons

Users Users Containers Containers Database Database

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

active-key

DOM Property: activeKey

Type
number
Default
0
box
DOM Property
box
Type
'light' | 'dark' | null
Default
null
vertical
DOM Property
vertical
Type
boolean
Default
false
fill
DOM Property
fill
Type
boolean
Default
false
border-bottom
DOM Property
borderBottom
Type
'true' | 'false'
Default
'true'
label-scroll-left

accessible label for the tab panel's scroll left button.

Type
unknown
Default
"Scroll left"
label-scroll-right

accessible label for the tab panel's scroll right button.

Type
unknown
Default
"Scroll right"

Events

tab-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

© 2022-2023 Red Hat, Inc. Deploys by Netlify