HTML

Tabs

ExamplesUsageDocumentationCSS Variables

Examples

Primary

Primary overflow

Whenever a .pf-m-current tab is scrolled beyond the width of the container, the appropriate scroll button should be highlighted using .pf-m-start-current or .pf-m-end-current to indicate that the current tab exists in that direction.

Usage

ClassApplied toOutcome
.pf-m-start.pf-c-tabsEnables the first directional scroll button.
.pf-m-start-current.pf-c-tabsHighlights the first directional scroll button.
.pf-m-end.pf-c-tabsEnables the second directional scroll button.
.pf-m-end-current.pf-c-tabsHighlights the second directional scroll button.

Secondary

Secondary tabs can be placed as an independent component anywhere within an interface. If placed directly adjacent to a set of primary tabs, they adopt a small amount of styling to properly align the two tab sets.

If secondary tabs cannot be placed directly adjacent to primary tabs, .pf-m-tabs-secondary can be applied to a directly adjacent container <div> with .pf-c-tabs as a child to achieve the same effect.

Usage

ClassApplied toOutcome
.pf-m-tabs-secondary.pf-c-tabs or <div>Creates a secondary tabs component. Required

Secondary overflow

Whenever a .pf-m-current tab is scrolled beyond the width of the container, the appropriate scroll button should be highlighted using .pf-m-start-current or .pf-m-end-current to indicate that the current tab exists in that direction.

Usage

ClassApplied toOutcome
.pf-m-start.pf-c-tabsEnables the first directional scroll button.
.pf-m-start-current.pf-c-tabsHighlights the first directional scroll button.
.pf-m-end.pf-c-tabsEnables the second directional scroll button.
.pf-m-end-current.pf-c-tabsHighlights the second directional scroll button.
.pf-m-hover.pf-c-tabs__buttonAdds the hover style to the tabs button.
.pf-m-active.pf-c-tabs__buttonAdds the active style to the tabs button.
.pf-m-focus.pf-c-tabs__buttonAdds the focus style to the tabs button.
.pf-m-secondary.pf-c-tabs__buttonAdds the secondary styles to the button.

Primary with secondary



Filled

Usage

ClassApplied toOutcome
.pf-m-fill.pf-c-tabsEnables the filled tab list layout. Required

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="Local"nav.pf-c-tabsGives the <nav> element an accessible name. Required when .pf-c-tabs is used with <nav>
aria-label="Local secondary"nav.pf-c-tabs.pf-m-tabs-secondaryGives the <nav> element an accessible name. Required when .pf-c-tabs.pf-m-tabs-secondary is used with <nav>

Usage

AttributeApplied toOutcome
.pf-c-tabs__button<a>, <button>Creates a tab link/button. Note: <a> should be used when there is a URL associated with the tab, and should only be used when .pf-c-tabs is used with <nav>. Required

Documentation

Overview

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.

CSS Variables

--pf-c-tabs__button--Backgroundc_tabs__button_Background
transparent
--pf-c-tabs__button--Colorc_tabs__button_Color
#151515
--pf-c-tabs__button--FontWeightc_tabs__button_FontWeight
400
--pf-c-tabs__button--OutlineOffsetc_tabs__button_OutlineOffset
calc(-1*0.25rem)
--pf-c-tabs__button--PaddingBottomc_tabs__button_PaddingBottom
0.5rem
--pf-c-tabs__button--PaddingLeftc_tabs__button_PaddingLeft
0.5rem
--pf-c-tabs__button--PaddingRightc_tabs__button_PaddingRight
0.5rem
--pf-c-tabs__button--PaddingTopc_tabs__button_PaddingTop
0.5rem
--pf-c-tabs__item--BackgroundColorc_tabs__item_BackgroundColor
#fff
--pf-c-tabs__item--BorderColorc_tabs__item_BorderColor
#d2d2d2
--pf-c-tabs__item--BorderWidthc_tabs__item_BorderWidth
1px
--pf-c-tabs__item--hover--Colorc_tabs__item_hover_Color
#737679
--pf-c-tabs__item--m-current--BorderTopWidthc_tabs__item_m_current_BorderTopWidth
2px
--pf-c-tabs__item--m-current--Colorc_tabs__item_m_current_Color
#06c
--pf-c-tabs__item--m-current--ZIndexc_tabs__item_m_current_ZIndex
200
--pf-c-tabs__scroll-button--m-secondary--hover--Colorc_tabs__scroll_button_m_secondary_hover_Color
#06c
--pf-c-tabs__scroll-button--m-secondary--nth-of-type-1--BoxShadowc_tabs__scroll_button_m_secondary_nth_of_type_1_BoxShadow
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-tabs__scroll-button--m-secondary--nth-of-type-2--BoxShadowc_tabs__scroll_button_m_secondary_nth_of_type_2_BoxShadow
-0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-tabs__scroll-button--m-secondary-right--m-start-current--Colorc_tabs__scroll_button_m_secondary_right_m_start_current_Color
#06c
--pf-c-tabs__scroll-button--Widthc_tabs__scroll_button_Width
2rem
--pf-c-tabs__scroll-button--ZIndexc_tabs__scroll_button_ZIndex
100