Skip to content
Patternfly Logo

Tabs

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

Users

Box light variation

Users

Default overflow

Users

Vertical

Users

Inset

Users

Icons and text

Users

Tabs with sub tabs

Filled

Users

Filled with icons

Users

Using the nav element

Users

Separate content

Tab 1 section

Children mounting on click

Tab 1 section

Unmounting invisible children

Tab 1 section

Toggled separate content


Tab 1 section

Props

Tabs

NameTypeRequiredDefaultDescription
activeKeynumber | stringNo0The index of the active tab
aria-labelstringNoProvides 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.
childrenReact.ReactNodeYesContent rendered inside the tabs component. Must be React.ReactElement<TabProps>[]
classNamestringNoAdditional classes added to the tabs
component'div' | 'nav'NoTabsComponent.divDetermines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region
idstringNoUniquely 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'; }NoInsets at various breakpoints.
isBoxbooleanNofalseEnables box styling to the tab component
isFilledbooleanNofalseEnables the filled tab list layout
isSecondarybooleanNofalseEnables secondary tab styling
isVerticalbooleanNofalseEnables vertical tab styling
leftScrollAriaLabelstringNo'Scroll left'Aria-label for the left scroll button
mountOnEnterbooleanNofalseWaits until the first "enter" transition to mount tab children (add them to the DOM)
onSelect(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => voidNo() => undefined as anyCallback to handle tab selection
ouiaSafeNo type infoNotrue
rightScrollAriaLabelstringNo'Scroll right'Aria-label for the right scroll button
unmountOnExitbooleanNofalseUnmounts tab children (removes them from the DOM) when they are no longer visible
variant'default' | 'light300'No'default'Tabs background color variant

TabProps

NameTypeRequiredDefaultDescription
childrenNo type infoNocontent rendered inside the Tab content area.
classNameNo type infoNoadditional classes added to the Tab
eventKeyNo type infoYesuniquely identifies the tab
hrefNo type infoNoURL 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.
isHiddenNo type infoNowhether to render the tab or not
tabContentIdNo type infoNochild id for case in which a TabContent section is defined outside of a Tabs component
tabContentRefNo type infoNochild reference for case in which a TabContent section is defined outside of a Tabs component
titleNo type infoYesContent rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling.

TabContent

NameTypeRequiredDefaultDescription
activeKeynumber | stringNoIdentifies the active Tab
aria-labelstringNotitle of controlling Tab if used outside Tabs component
childReact.ReactElement<any>NoChild to show in the content area
childrenanyNocontent rendered inside the tab content area if used outside Tabs component
classNamestringNoclass of tab content area if used outside Tabs component
eventKeynumber | stringNouniquely identifies the controlling Tab if used outside Tabs component
idstringYesid passed from parent to identify the content section
innerRefReact.Ref<any>NoCallback for the section ref

TabTitleText

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesText to be rendered inside the tab button title.
classNamestringNo''additional classes added to the tab title text

TabTitleIcon

NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesIcon to be rendered inside the tab button title.
classNamestringNo''additional classes added to the tab title icon

CSS variables

.pf-c-tabs--pf-c-tabs--inset
0
.pf-c-tabs--pf-c-tabs--Width
auto
.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-page-insets--inset
1rem
.pf-c-tabs--pf-c-tabs--m-page-insets--xl--inset
1.5rem
.pf-c-tabs--pf-c-tabs--m-vertical--Width
100%
.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--Width
100%
.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.pf-m-page-insets--pf-c-tabs--inset
1rem
.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