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
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
<pf-tabs box="light">...</pf-tabs>
Box Dark
<pf-tabs box="dark">...</pf-tabs>
Vertical
<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.
<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>
Filled with Icons
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