Tabs
Tabs are used to present a set on tabs for organizing content on a page. It must always be used together with a tab content component.
ExamplesUsageCSS VariablesExamples
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
disabled | .pf-c-tabs__scroll-button | Indicates that a scroll button is disabled, when at the first or last item of a list. Required when disabled |
aria-hidden="true" | .pf-c-tabs__scroll-button | Hides the icon from assistive technologies.Required when not scrollable |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-scrollable | .pf-c-tabs | Enables the directional scroll buttons. |
.pf-c-tabs__scroll-button | <button> | Initiates a tabs component scroll button. |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]} | .pf-c-tabs | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-fill | .pf-c-tabs | Modifies the tabs to fill the available space. Required |
The tabs component 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.
Tabs should be used with the tab content component.
Whenever a list of tabs is unique on the current page, it can be used in a <nav> element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the <nav> element.
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
aria-label="Descriptive text" | nav.pf-c-tabs, nav.pf-c-tabs.pf-m-secondary | Gives the <nav> an accessible label. Required when .pf-c-tabs is used with <nav> |
aria-label="Descriptive text" | .pf-c-inline-edit__toggle > button | Provides an accessible description for toggle button. Required |
disabled | .pf-c-tabs__scroll-button | Indicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. Required |
Usage
| Class | Applied to | Outcome |
|---|---|---|
.pf-c-tabs | <nav>, <div> | Initiates the tabs component. Required |
.pf-c-tabs__list | <div> | Initiates a tabs component list. Required |
.pf-c-tabs__item | <div> | Initiates a tabs component item. Required |
.pf-c-tabs__item-text | <span> | Initiates a tabs component item icon. Required |
.pf-c-tabs__item-icon | <span> | Initiates a tabs component item text. Required |
.pf-c-tabs__link | <button>, <a> | Initiates a tabs component link. Required |
.pf-c-tabs__scroll-button | <button> | Initiates a tabs component scroll button. |
.pf-m-secondary | .pf-c-tabs | Applies secondary styling to the tab component. |
.pf-m-no-border | .pf-c-tabs | Removes bottom border from a tab component. |
.pf-m-box | .pf-c-tabs | Applies box styling to the tab component. |
.pf-m-vertical | .pf-c-tabs | Applies vertical styling to the tab component. |
.pf-m-fill | .pf-c-tabs | Modifies the tabs to fill the available space. |
.pf-m-current | .pf-c-tabs__item | Indicates that a tab item is currently selected. |
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]} | .pf-c-tabs | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
CSS Variables
| .pf-c-tabs | --pf-c-tabs--Inset | 0 | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderStyle | solid | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderColor | #d2d2d2 | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderWidth | 1px | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderTopWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderRightWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderBottomWidth | 1px | ||
| .pf-c-tabs | --pf-c-tabs--before--BorderLeftWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs--m-vertical--Inset | 1.5rem | ||
| .pf-c-tabs | --pf-c-tabs--m-vertical--MaxWidth | 15.625rem | ||
| .pf-c-tabs | --pf-c-tabs--m-vertical--m-box--Inset | 2rem | ||
| .pf-c-tabs | --pf-c-tabs__link--Color | #6a6e73 | ||
| .pf-c-tabs | --pf-c-tabs__link--BackgroundColor | transparent | ||
| .pf-c-tabs | --pf-c-tabs__link--OutlineOffset | calc(-1 * 0.375rem) | ||
| .pf-c-tabs | --pf-c-tabs__link--PaddingTop | 0.5rem | ||
| .pf-c-tabs | --pf-c-tabs__link--PaddingRight | 1rem | ||
| .pf-c-tabs | --pf-c-tabs__link--PaddingBottom | 0.5rem | ||
| .pf-c-tabs | --pf-c-tabs__link--PaddingLeft | 1rem | ||
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--Color | #151515 | ||
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--Background | #fff | ||
| .pf-c-tabs | --pf-c-tabs--m-vertical__link--PaddingTop | 1rem | ||
| .pf-c-tabs | --pf-c-tabs--m-vertical__link--PaddingBottom | 1rem | ||
| .pf-c-tabs | --pf-c-tabs--m-box__link--BackgroundColor | #f0f0f0 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderStyle | solid | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderColor | #d2d2d2 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderWidth | 1px | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderTopWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderRightWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderBottomWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderLeftWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderRightColor | #d2d2d2 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--BorderBottomColor | #d2d2d2 | ||
| .pf-c-tabs | --pf-c-tabs__link--before--Left | calc(1px * -1) | ||
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--after--BorderColor | #06c | ||
| .pf-c-tabs | --pf-c-tabs__link--after--BorderStyle | solid | ||
| .pf-c-tabs | --pf-c-tabs__link--after--BorderColor | #b8bbbe | ||
| .pf-c-tabs | --pf-c-tabs__link--after--BorderWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--after--BorderTopWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--after--BorderRightWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--after--BorderLeftWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__link--hover--after--BorderWidth | 3px | ||
| .pf-c-tabs | --pf-c-tabs__link--child--MarginRight | 1rem | ||
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--after--BorderWidth | 3px | ||
| .pf-c-tabs | --pf-c-tabs--m-vertical--m-box__link--after--Top | 0 | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--BorderStyle | solid | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--Color | #151515 | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--hover--Color | #06c | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--disabled--Color | #d2d2d2 | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--BackgroundColor | #fff | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--Width | 3rem | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--xl--Width | 4rem | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--OutlineOffset | calc(-1 * 0.25rem) | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--Transition | margin .125s, transform .125s, opacity .125s | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderColor | #d2d2d2 | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderWidth | 1px | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderRightWidth | 0 | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderBottomWidth | 1px | ||
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderLeftWidth | 0 | ||
| .pf-c-tabs.pf-m-scrollable.pf-m-secondary | --pf-c-tabs--before--BorderWidth | 0 | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__link | --pf-c-tabs__link--after--BorderBottomWidth | 0 | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__link | --pf-c-tabs__link--after--BorderTopWidth | 0 | ||
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--BackgroundColor | #f0f0f0 | ||
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--before--BorderBottomWidth | 1px | ||
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--before--BorderRightWidth | 1px | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__item:last-child | --pf-c-tabs__link--before--BorderRightWidth | 0 | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--BackgroundColor | #fff | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderRightWidth | 1px | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderBottomColor | #fff | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child | --pf-c-tabs__link--before--BorderLeftWidth | 1px | ||
| .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current + .pf-c-tabs__item | --pf-c-tabs__link--before--Left | 0 | ||
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs--Inset | 1.5rem | ||
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs--before--BorderBottomWidth | 0 | ||
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs--before--BorderLeftWidth | 1px | ||
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--before--Left | 0 | ||
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--PaddingTop | 1rem | ||
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--PaddingBottom | 1rem | ||
| .pf-c-tabs.pf-m-vertical .pf-c-tabs__link | --pf-c-tabs__link--after--BorderTopWidth | 0 | ||
| .pf-c-tabs.pf-m-vertical .pf-c-tabs__link | --pf-c-tabs__link--after--BorderLeftWidth | 0 | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--Inset | 2rem | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--before--BorderLeftWidth | 0 | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--before--BorderRightWidth | 1px | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child | --pf-c-tabs__link--before--BorderBottomWidth | 0 | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child | --pf-c-tabs__link--before--BorderRightWidth | 1px | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderRightColor | #fff | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderBottomColor | #d2d2d2 | ||
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--before--BorderBottomWidth | 1px | ||
| .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--Color | #151515 | ||
| .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--after--BorderColor | #06c | ||
| .pf-c-tabs__item.pf-m-current | --pf-c-tabs__link--after--BorderWidth | 3px | ||
| .pf-c-tabs__link | --pf-c-tabs__link--after--BorderBottomWidth | 0 | ||
| .pf-c-tabs__link:hover | --pf-c-tabs__link--after--BorderWidth | 3px | ||
| .pf-c-tabs__link .pf-c-tabs__item-icon:last-child | --pf-c-tabs__link--child--MarginRight | 0 | ||
| .pf-c-tabs__scroll-button:hover | --pf-c-tabs__scroll-button--Color | #06c | ||
| .pf-c-tabs__scroll-button:nth-of-type(1) | --pf-c-tabs__scroll-button--before--BorderRightWidth | 1px | ||
| .pf-c-tabs__scroll-button:nth-of-type(2) | --pf-c-tabs__scroll-button--before--BorderLeftWidth | 1px | ||
| .pf-c-tabs__scroll-button:disabled | --pf-c-tabs__scroll-button--Color | #d2d2d2 | ||
| .pf-c-tabs.pf-m-inset-none | --pf-c-tabs--Inset | 0 | ||
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--Inset | 0.5rem | ||
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--Inset | 1rem | ||
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--Inset | 1.5rem | ||
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--Inset | 2rem | ||
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--Inset | 3rem | ||
