Skip to Content
Patternfly Logo

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 Variables

Examples

Default

Default overflow beginning of list

Accessibility

AttributeApplied toOutcome
disabled.pf-c-tabs__scroll-buttonIndicates 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-buttonHides the icon from assistive technologies.Required when not scrollable

Usage

ClassApplied toOutcome
.pf-m-scrollable.pf-c-tabsEnables the directional scroll buttons.
.pf-c-tabs__scroll-button<button>Initiates a tabs component scroll button.

Vertical

Box

Box overflow

Box vertical

Inset

Inset box

Usage

ClassApplied toOutcome
.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}.pf-c-tabsModifies the tabs component padding/inset to visually match padding of other adjacent components.

Icons and text

Tabs with sub tabs

Box tabs with sub tabs

Filled

Filled with icons

Filled box

Filled box with icons

Usage

ClassApplied toOutcome
.pf-m-fill.pf-c-tabsModifies 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

AttributeApplied toOutcome
aria-label="Descriptive text"nav.pf-c-tabs, nav.pf-c-tabs.pf-m-secondaryGives the <nav> an accessible label. Required when .pf-c-tabs is used with <nav>
aria-label="Descriptive text".pf-c-inline-edit__toggle > buttonProvides an accessible description for toggle button. Required
disabled.pf-c-tabs__scroll-buttonIndicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. Required

Usage

ClassApplied toOutcome
.pf-c-tabs<nav>, <div>Initiates the tabs component. Required
.pf-c-tabs__list<ul>Initiates a tabs component list. Required
.pf-c-tabs__item<li>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-tabsApplies secondary styling to the tab component.
.pf-m-no-border-bottom.pf-c-tabsRemoves bottom border from a tab component.
.pf-m-box.pf-c-tabsApplies box styling to the tab component.
.pf-m-vertical.pf-c-tabsApplies vertical styling to the tab component.
.pf-m-fill.pf-c-tabsModifies the tabs to fill the available space.
.pf-m-current.pf-c-tabs__itemIndicates that a tab item is currently selected.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}.pf-c-tabsModifies the tabs component padding/inset to visually match padding of other adjacent components.

CSS Variables

.pf-c-tabs--pf-c-tabs--insetc_tabs_inset
0
.pf-c-tabs--pf-c-tabs--before--BorderColorc_tabs_before_BorderColor
#d2d2d2
.pf-c-tabs--pf-c-tabs--before--border-width--basec_tabs_before_border_width_base
1px
.pf-c-tabs--pf-c-tabs--before--BorderTopWidthc_tabs_before_BorderTopWidth
0
.pf-c-tabs--pf-c-tabs--before--BorderRightWidthc_tabs_before_BorderRightWidth
0
.pf-c-tabs--pf-c-tabs--before--BorderBottomWidthc_tabs_before_BorderBottomWidth
1px
.pf-c-tabs--pf-c-tabs--before--BorderLeftWidthc_tabs_before_BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
1.5rem
.pf-c-tabs--pf-c-tabs--m-vertical--MaxWidthc_tabs_m_vertical_MaxWidth
15.625rem
.pf-c-tabs--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
2rem
.pf-c-tabs--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidthc_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--BorderRightWidthc_tabs_m_box__item_m_current_last_child__link_before_BorderRightWidth
1px
.pf-c-tabs--pf-c-tabs__link--Colorc_tabs__link_Color
#6a6e73
.pf-c-tabs--pf-c-tabs__link--FontSizec_tabs__link_FontSize
1rem
.pf-c-tabs--pf-c-tabs__link--BackgroundColorc_tabs__link_BackgroundColor
transparent
.pf-c-tabs--pf-c-tabs__link--OutlineOffsetc_tabs__link_OutlineOffset
calc(-1 * 0.375rem)
.pf-c-tabs--pf-c-tabs__link--PaddingTopc_tabs__link_PaddingTop
0.5rem
.pf-c-tabs--pf-c-tabs__link--PaddingRightc_tabs__link_PaddingRight
1rem
.pf-c-tabs--pf-c-tabs__link--PaddingBottomc_tabs__link_PaddingBottom
0.5rem
.pf-c-tabs--pf-c-tabs__link--PaddingLeftc_tabs__link_PaddingLeft
1rem
.pf-c-tabs--pf-c-tabs__item--m-current__link--Colorc_tabs__item_m_current__link_Color
#151515
.pf-c-tabs--pf-c-tabs__item--m-current__link--BackgroundColorc_tabs__item_m_current__link_BackgroundColor
#fff
.pf-c-tabs--pf-c-tabs--m-vertical__link--PaddingTopc_tabs_m_vertical__link_PaddingTop
1rem
.pf-c-tabs--pf-c-tabs--m-vertical__link--PaddingBottomc_tabs_m_vertical__link_PaddingBottom
1rem
.pf-c-tabs--pf-c-tabs--m-box__link--BackgroundColorc_tabs_m_box__link_BackgroundColor
#f0f0f0
.pf-c-tabs--pf-c-tabs--m-secondary__link--FontSizec_tabs_m_secondary__link_FontSize
0.875rem
.pf-c-tabs--pf-c-tabs__link--before--border-color--basec_tabs__link_before_border_color_base
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--BorderRightColorc_tabs__link_before_BorderRightColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--BorderBottomColorc_tabs__link_before_BorderBottomColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--border-width--basec_tabs__link_before_border_width_base
1px
.pf-c-tabs--pf-c-tabs__link--before--BorderTopWidthc_tabs__link_before_BorderTopWidth
0
.pf-c-tabs--pf-c-tabs__link--before--BorderRightWidthc_tabs__link_before_BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__link--before--BorderBottomWidthc_tabs__link_before_BorderBottomWidth
0
.pf-c-tabs--pf-c-tabs__link--before--BorderLeftWidthc_tabs__link_before_BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs__link--before--Leftc_tabs__link_before_Left
calc(1px * -1)
.pf-c-tabs--pf-c-tabs__link--after--Topc_tabs__link_after_Top
auto
.pf-c-tabs--pf-c-tabs__link--after--Rightc_tabs__link_after_Right
0
.pf-c-tabs--pf-c-tabs__link--after--Bottomc_tabs__link_after_Bottom
0
.pf-c-tabs--pf-c-tabs__link--after--BorderColorc_tabs__link_after_BorderColor
#b8bbbe
.pf-c-tabs--pf-c-tabs__link--after--BorderWidthc_tabs__link_after_BorderWidth
0
.pf-c-tabs--pf-c-tabs__link--after--BorderTopWidthc_tabs__link_after_BorderTopWidth
0
.pf-c-tabs--pf-c-tabs__link--after--BorderRightWidthc_tabs__link_after_BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__link--after--BorderLeftWidthc_tabs__link_after_BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs__link--hover--after--BorderWidthc_tabs__link_hover_after_BorderWidth
3px
.pf-c-tabs--pf-c-tabs__link--focus--after--BorderWidthc_tabs__link_focus_after_BorderWidth
3px
.pf-c-tabs--pf-c-tabs__link--active--after--BorderWidthc_tabs__link_active_after_BorderWidth
3px
.pf-c-tabs--pf-c-tabs__item--m-current__link--after--BorderColorc_tabs__item_m_current__link_after_BorderColor
#06c
.pf-c-tabs--pf-c-tabs__item--m-current__link--after--BorderWidthc_tabs__item_m_current__link_after_BorderWidth
3px
.pf-c-tabs--pf-c-tabs__link--child--MarginRightc_tabs__link_child_MarginRight
1rem
.pf-c-tabs--pf-c-tabs__scroll-button--Colorc_tabs__scroll_button_Color
#151515
.pf-c-tabs--pf-c-tabs__scroll-button--hover--Colorc_tabs__scroll_button_hover_Color
#06c
.pf-c-tabs--pf-c-tabs__scroll-button--disabled--Colorc_tabs__scroll_button_disabled_Color
#d2d2d2
.pf-c-tabs--pf-c-tabs__scroll-button--BackgroundColorc_tabs__scroll_button_BackgroundColor
#fff
.pf-c-tabs--pf-c-tabs__scroll-button--Widthc_tabs__scroll_button_Width
3rem
.pf-c-tabs--pf-c-tabs__scroll-button--xl--Widthc_tabs__scroll_button_xl_Width
4rem
.pf-c-tabs--pf-c-tabs__scroll-button--OutlineOffsetc_tabs__scroll_button_OutlineOffset
calc(-1 * 0.25rem)
.pf-c-tabs--pf-c-tabs__scroll-button--TransitionDuration--marginc_tabs__scroll_button_TransitionDuration_margin
.125s
.pf-c-tabs--pf-c-tabs__scroll-button--TransitionDuration--transformc_tabs__scroll_button_TransitionDuration_transform
.125s
.pf-c-tabs--pf-c-tabs__scroll-button--TransitionDuration--opacityc_tabs__scroll_button_TransitionDuration_opacity
.125s
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderColorc_tabs__scroll_button_before_BorderColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__scroll-button--before--border-width--basec_tabs__scroll_button_before_border_width_base
1px
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderRightWidthc_tabs__scroll_button_before_BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderBottomWidthc_tabs__scroll_button_before_BorderBottomWidth
1px
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderLeftWidthc_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--BorderLeftWidthc_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--BorderRightWidthc_tabs_m_box__item_m_current_last_child__link_before_BorderRightWidth
0
.pf-c-tabs.pf-m-secondary--pf-c-tabs--before--BorderBottomWidthc_tabs_before_BorderBottomWidth
0
.pf-c-tabs.pf-m-secondary--pf-c-tabs__link--FontSizec_tabs__link_FontSize
0.875rem
.pf-c-tabs.pf-m-box .pf-c-tabs__link--pf-c-tabs__link--after--BorderBottomWidthc_tabs__link_after_BorderBottomWidth
0
.pf-c-tabs.pf-m-box .pf-c-tabs__link--pf-c-tabs__link--after--BorderTopWidthc_tabs__link_after_BorderTopWidth
0
.pf-c-tabs.pf-m-box--pf-c-tabs__link--BackgroundColorc_tabs__link_BackgroundColor
#f0f0f0
.pf-c-tabs.pf-m-box--pf-c-tabs__link--before--BorderBottomWidthc_tabs__link_before_BorderBottomWidth
1px
.pf-c-tabs.pf-m-box--pf-c-tabs__link--before--BorderRightWidthc_tabs__link_before_BorderRightWidth
1px
.pf-c-tabs.pf-m-box--pf-c-tabs__link--after--Topc_tabs__link_after_Top
0
.pf-c-tabs.pf-m-box--pf-c-tabs__link--after--Bottomc_tabs__link_after_Bottom
auto
.pf-c-tabs.pf-m-box .pf-c-tabs__item:last-child--pf-c-tabs__link--before--BorderRightWidthc_tabs__link_before_BorderRightWidth
0
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current--pf-c-tabs__link--BackgroundColorc_tabs__link_BackgroundColor
#fff
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current--pf-c-tabs__link--before--BorderBottomColorc_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--Leftc_tabs__link_before_Left
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs--insetc_tabs_inset
1.5rem
.pf-c-tabs.pf-m-vertical--pf-c-tabs--before--BorderBottomWidthc_tabs_before_BorderBottomWidth
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs--before--BorderLeftWidthc_tabs_before_BorderLeftWidth
1px
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--PaddingTopc_tabs__link_PaddingTop
1rem
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--PaddingBottomc_tabs__link_PaddingBottom
1rem
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--before--Leftc_tabs__link_before_Left
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--after--Topc_tabs__link_after_Top
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--after--Bottomc_tabs__link_after_Bottom
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--after--Rightc_tabs__link_after_Right
auto
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link--pf-c-tabs__link--after--BorderTopWidthc_tabs__link_after_BorderTopWidth
0
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link--pf-c-tabs__link--after--BorderLeftWidthc_tabs__link_after_BorderLeftWidth
0
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs--insetc_tabs_inset
2rem
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs--before--BorderLeftWidthc_tabs_before_BorderLeftWidth
0
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs--before--BorderRightWidthc_tabs_before_BorderRightWidth
1px
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child--pf-c-tabs__link--before--BorderBottomWidthc_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--BorderRightWidthc_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--BorderRightColorc_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--BorderBottomColorc_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--BorderBottomWidthc_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--BorderTopWidthc_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--BorderTopWidthc_tabs__link_before_BorderTopWidth
1px
.pf-c-tabs__item.pf-m-current--pf-c-tabs__link--Colorc_tabs__link_Color
#151515
.pf-c-tabs__item.pf-m-current--pf-c-tabs__link--after--BorderColorc_tabs__link_after_BorderColor
#06c
.pf-c-tabs__item.pf-m-current--pf-c-tabs__link--after--BorderWidthc_tabs__link_after_BorderWidth
3px
.pf-c-tabs__link--pf-c-tabs__link--after--BorderBottomWidthc_tabs__link_after_BorderBottomWidth
0
.pf-c-tabs__link:hover--pf-c-tabs__link--after--BorderWidthc_tabs__link_after_BorderWidth
3px
.pf-c-tabs__link:focus--pf-c-tabs__link--after--BorderWidthc_tabs__link_after_BorderWidth
3px
.pf-c-tabs__link:active--pf-c-tabs__link--after--BorderWidthc_tabs__link_after_BorderWidth
3px
.pf-c-tabs__link .pf-c-tabs__item-icon:last-child--pf-c-tabs__link--child--MarginRightc_tabs__link_child_MarginRight
0
.pf-c-tabs__scroll-button:hover--pf-c-tabs__scroll-button--Colorc_tabs__scroll_button_Color
#06c
.pf-c-tabs__scroll-button:nth-of-type(1)--pf-c-tabs__scroll-button--before--BorderRightWidthc_tabs__scroll_button_before_BorderRightWidth
1px
.pf-c-tabs__scroll-button:nth-of-type(2)--pf-c-tabs__scroll-button--before--BorderLeftWidthc_tabs__scroll_button_before_BorderLeftWidth
1px
.pf-c-tabs__scroll-button:disabled--pf-c-tabs__scroll-button--Colorc_tabs__scroll_button_Color
#d2d2d2
.pf-c-tabs.pf-m-inset-none--pf-c-tabs--insetc_tabs_inset
0
.pf-c-tabs.pf-m-inset-none--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
0
.pf-c-tabs.pf-m-inset-none--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
0
.pf-c-tabs.pf-m-inset-sm--pf-c-tabs--insetc_tabs_inset
0.5rem
.pf-c-tabs.pf-m-inset-sm--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
0.5rem
.pf-c-tabs.pf-m-inset-sm--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
0.5rem
.pf-c-tabs.pf-m-inset-md--pf-c-tabs--insetc_tabs_inset
1rem
.pf-c-tabs.pf-m-inset-md--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
1rem
.pf-c-tabs.pf-m-inset-md--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
1rem
.pf-c-tabs.pf-m-inset-lg--pf-c-tabs--insetc_tabs_inset
1.5rem
.pf-c-tabs.pf-m-inset-lg--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
1.5rem
.pf-c-tabs.pf-m-inset-lg--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
1.5rem
.pf-c-tabs.pf-m-inset-xl--pf-c-tabs--insetc_tabs_inset
2rem
.pf-c-tabs.pf-m-inset-xl--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
2rem
.pf-c-tabs.pf-m-inset-xl--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
2rem
.pf-c-tabs.pf-m-inset-2xl--pf-c-tabs--insetc_tabs_inset
3rem
.pf-c-tabs.pf-m-inset-2xl--pf-c-tabs--m-vertical--insetc_tabs_m_vertical_inset
3rem
.pf-c-tabs.pf-m-inset-2xl--pf-c-tabs--m-vertical--m-box--insetc_tabs_m_vertical_m_box_inset
3rem