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.
ExamplesPropsCSS VariablesExamples
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | Yes | content rendered inside the Tabs Component. | |
| className | string | No | '' | additional classes added to the Tabs |
| activeKey | number | string | No | 0 | the index of the active tab |
| onSelect | (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void | No | () => undefined as any | handle tab selection |
| id | string | No | uniquely identifies the Tabs | |
| isFilled | boolean | No | false | enables the filled tab list layout |
| isSecondary | boolean | No | false | enables Secondary Tab styling |
| leftScrollAriaLabel | string | No | 'Scroll left' | Aria-label for the left Scroll Button |
| rightScrollAriaLabel | string | No | 'Scroll right' | Aria-label for the right Scroll Button |
| variant | 'div' | 'nav' | No | TabsVariant.div | determines what tag is used around the Tabs. Use "nav" to define the Tabs inside a navigation region |
| aria-label | string | No | provides an accessible label for the Tabs. Labels should be unique for each set of Tabs that are present on a page. When variant is set to nav, this prop should be defined to differentiate the Tabs from other navigation regions on the page. | |
| mountOnEnter | boolean | No | false | waits until the first "enter" transition to mount tab children (add them to the DOM) |
| unmountOnExit | boolean | No | false | unmounts tab children (removes them from the DOM) when they are no longer visible |
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 | ||
