Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs. The Tabs items background can be also toggled with 'Tab light variation' checkbox. Similarly the 'Tab content light variation' checkbox affects the TabContent background.
Examples
Default overflow
Tabs with sub tabs
Props
Tabs
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| activeKey | number | string | No | 0 | The index of the active tab |
| 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 component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page. | |
| children | React.ReactNode | Yes | Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] | |
| className | string | No | Additional classes added to the tabs | |
| component | 'div' | 'nav' | No | TabsComponent.div | Determines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region |
| id | string | No | Uniquely identifies the tabs | |
| inset | { default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; } | No | Insets at various breakpoints. | |
| isBox | boolean | No | false | Enables box styling to the tab component |
| isFilled | boolean | No | false | Enables the filled tab list layout |
| isSecondary | boolean | No | false | Enables secondary tab styling |
| isVertical | boolean | No | false | Enables vertical tab styling |
| leftScrollAriaLabel | string | No | 'Scroll left' | Aria-label for the left scroll button |
| mountOnEnter | boolean | No | false | Waits until the first "enter" transition to mount tab children (add them to the DOM) |
| onSelect | (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void | No | () => undefined as any | Callback to handle tab selection |
| ouiaSafe | No type info | No | true | |
| rightScrollAriaLabel | string | No | 'Scroll right' | Aria-label for the right scroll button |
| unmountOnExit | boolean | No | false | Unmounts tab children (removes them from the DOM) when they are no longer visible |
| variant | 'default' | 'light300' | No | 'default' | Tabs background color variant |
TabProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | No type info | No | content rendered inside the Tab content area. | |
| className | No type info | No | additional classes added to the Tab | |
| eventKey | No type info | Yes | uniquely identifies the tab | |
| href | No type info | No | URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs component="nav"> should have an href. | |
| isHidden | No type info | No | whether to render the tab or not | |
| tabContentId | No type info | No | child id for case in which a TabContent section is defined outside of a Tabs component | |
| tabContentRef | No type info | No | child reference for case in which a TabContent section is defined outside of a Tabs component | |
| title | No type info | Yes | Content rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling. |
TabContent
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| activeKey | number | string | No | Identifies the active Tab | |
| aria-label | string | No | title of controlling Tab if used outside Tabs component | |
| child | React.ReactElement<any> | No | Child to show in the content area | |
| children | any | No | content rendered inside the tab content area if used outside Tabs component | |
| className | string | No | class of tab content area if used outside Tabs component | |
| eventKey | number | string | No | uniquely identifies the controlling Tab if used outside Tabs component | |
| id | string | Yes | id passed from parent to identify the content section | |
| innerRef | React.Ref<any> | No | Callback for the section ref |
TabTitleText
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | Yes | Text to be rendered inside the tab button title. | |
| className | string | No | '' | additional classes added to the tab title text |
TabTitleIcon
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | Yes | Icon to be rendered inside the tab button title. | |
| className | string | No | '' | additional classes added to the tab title icon |
CSS variables
| .pf-c-tabs | --pf-c-tabs--inset | 0 | |
| .pf-c-tabs | --pf-c-tabs--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs--before--border-width--base | 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--m-vertical__list--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderTopWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderRightWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderBottomWidth | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--before--BorderLeftWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth | 1px | |
| .pf-c-tabs | --pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor | transparent | |
| .pf-c-tabs | --pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor | #f0f0f0 | |
| .pf-c-tabs | --pf-c-tabs__list--Display | flex | |
| .pf-c-tabs | --pf-c-tabs__list--Visibility | visible | |
| .pf-c-tabs | --pf-c-tabs__link--Color | #6a6e73 | |
| .pf-c-tabs | --pf-c-tabs__link--FontSize | 1rem | |
| .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--BackgroundColor | #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--m-secondary__link--FontSize | 0.875rem | |
| .pf-c-tabs | --pf-c-tabs__link--before--border-color--base | #d2d2d2 | |
| .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--border-width--base | 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--Left | calc(1px * -1) | |
| .pf-c-tabs | --pf-c-tabs__link--after--Top | auto | |
| .pf-c-tabs | --pf-c-tabs__link--after--Right | 0 | |
| .pf-c-tabs | --pf-c-tabs__link--after--Bottom | 0 | |
| .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--focus--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__link--active--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--after--BorderColor | #06c | |
| .pf-c-tabs | --pf-c-tabs__item--m-current__link--after--BorderWidth | 3px | |
| .pf-c-tabs | --pf-c-tabs__link--child--MarginRight | 1rem | |
| .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--TransitionDuration--margin | .125s | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--TransitionDuration--transform | .125s | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--TransitionDuration--opacity | .125s | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--BorderColor | #d2d2d2 | |
| .pf-c-tabs | --pf-c-tabs__scroll-button--before--border-width--base | 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-c-tabs__list--ScrollSnapTypeAxis | x | |
| .pf-c-tabs | --pf-c-tabs__list--ScrollSnapTypeStrictness | proximity | |
| .pf-c-tabs | --pf-c-tabs__list--ScrollSnapType | x proximity | |
| .pf-c-tabs | --pf-c-tabs__item--ScrollSnapAlign | end | |
| .pf-c-tabs | --pf-c-tabs--m-vertical__list--ScrollSnapTypeAxis | y | |
| .pf-c-tabs | --pf-c-tabs__toggle--Display | flex | |
| .pf-c-tabs | --pf-c-tabs__toggle--Visibility | hidden | |
| .pf-c-tabs | --pf-c-tabs__toggle--MarginBottom | 0 | |
| .pf-c-tabs | --pf-c-tabs--m-expanded__toggle--MarginBottom | 1rem | |
| .pf-c-tabs | --pf-c-tabs__toggle-icon--Color | currentColor | |
| .pf-c-tabs | --pf-c-tabs__toggle-icon--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | |
| .pf-c-tabs | --pf-c-tabs__toggle-icon--Rotate | 0 | |
| .pf-c-tabs | --pf-c-tabs__toggle-button--MarginTop | calc(-1 * 0.375rem) | |
| .pf-c-tabs | --pf-c-tabs__toggle-button--MarginBottom | calc(-1 * 0.375rem) | |
| .pf-c-tabs | --pf-c-tabs__toggle-button--MarginLeft | calc(-1 * 1rem) | |
| .pf-c-tabs | --pf-c-tabs--m-expanded__toggle-icon--Color | #151515 | |
| .pf-c-tabs | --pf-c-tabs--m-expanded__toggle-icon--Rotate | 90deg | |
| .pf-c-tabs.pf-m-fill .pf-c-tabs__item:first-child | --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth | 0 | |
| .pf-c-tabs.pf-m-fill .pf-c-tabs__item:last-child | --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth | 0 | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs--before--BorderBottomWidth | 0 | |
| .pf-c-tabs.pf-m-secondary | --pf-c-tabs__link--FontSize | 0.875rem | |
| .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__link--after--Top | 0 | |
| .pf-c-tabs.pf-m-box | --pf-c-tabs__link--after--Bottom | auto | |
| .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--BorderBottomColor | #fff | |
| .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-box.pf-m-color-scheme--light-300 | --pf-c-tabs__link--BackgroundColor | transparent | |
| .pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300 | --pf-c-tabs__item--m-current__link--BackgroundColor | #f0f0f0 | |
| .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__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--before--Left | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--after--Top | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--after--Bottom | 0 | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__link--after--Right | auto | |
| .pf-c-tabs.pf-m-vertical | --pf-c-tabs__list--ScrollSnapTypeAxis | y | |
| .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-vertical.pf-m-expandable | --pf-c-tabs__list--Display | none | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__list--Visibility | hidden | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__toggle--Display | flex | |
| .pf-c-tabs.pf-m-vertical.pf-m-expandable | --pf-c-tabs__toggle--Visibility | visible | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__list--Display | flex | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__list--Visibility | visible | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__toggle--Display | none | |
| .pf-c-tabs.pf-m-vertical.pf-m-non-expandable | --pf-c-tabs__toggle--Visibility | hidden | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__list--Display | flex | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__list--Visibility | visible | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__toggle--MarginBottom | 1rem | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__toggle-icon--Color | #151515 | |
| .pf-c-tabs.pf-m-vertical.pf-m-expanded | --pf-c-tabs__toggle-icon--Rotate | 90deg | |
| .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--m-vertical__list--before--BorderLeftWidth | 0 | |
| .pf-c-tabs.pf-m-box.pf-m-vertical | --pf-c-tabs--m-vertical__list--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.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current:first-child | --pf-c-tabs__link--before--BorderTopWidth | 1px | |
| .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:first-child.pf-m-current | --pf-c-tabs__link--before--BorderTopWidth | 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:focus | --pf-c-tabs__link--after--BorderWidth | 3px | |
| .pf-c-tabs__link:active | --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-none | --pf-c-tabs--m-vertical--inset | 0 | |
| .pf-c-tabs.pf-m-inset-none | --pf-c-tabs--m-vertical--m-box--inset | 0 | |
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--inset | 0.5rem | |
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--m-vertical--inset | 0.5rem | |
| .pf-c-tabs.pf-m-inset-sm | --pf-c-tabs--m-vertical--m-box--inset | 0.5rem | |
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--inset | 1rem | |
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--m-vertical--inset | 1rem | |
| .pf-c-tabs.pf-m-inset-md | --pf-c-tabs--m-vertical--m-box--inset | 1rem | |
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--inset | 1.5rem | |
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--m-vertical--inset | 1.5rem | |
| .pf-c-tabs.pf-m-inset-lg | --pf-c-tabs--m-vertical--m-box--inset | 1.5rem | |
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--inset | 2rem | |
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--m-vertical--inset | 2rem | |
| .pf-c-tabs.pf-m-inset-xl | --pf-c-tabs--m-vertical--m-box--inset | 2rem | |
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--inset | 3rem | |
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--m-vertical--inset | 3rem | |
| .pf-c-tabs.pf-m-inset-2xl | --pf-c-tabs--m-vertical--m-box--inset | 3rem | |
View source on GitHub
