Patternfly Logo

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 properties
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
TabContent properties
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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeYesText to be rendered inside the tab button title.
classNamestringNo''additional classes added to the tab title text
TabTitleIcon properties
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--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-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__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-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--before--BorderLeftWidth
1px
.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__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.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