Tabs
Tabs allow users to navigate between views within the same page or context.
Overview
Default
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.
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>
Variants
Box Light
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-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
<pf-tab-panel>Aria Disabled</pf-tab-panel>
</pf-tabs>
Box Dark
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-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
<pf-tab-panel>Aria Disabled</pf-tab-panel>
</pf-tabs>
Vertical
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-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
<pf-tab-panel>Aria 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.
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 set="fas" icon="users" size="sm" loading="idle"></pf-icon>
Users
</pf-tab>
...
</pf-tabs>
View HTML Source
<pf-tabs>
<pf-tab slot="tab">
<pf-icon set="fas" icon="users" size="sm" 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
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
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