HTML

Tabs

ExamplesDocumentationCSS Variables

Examples

Primary tabs

Copied to clipboard

Primary tabs overflow

Copied to clipboard

Secondary tabs

Copied to clipboard

Secondary tabs overflow

Copied to clipboard

Primary tabs with secondary tabs



Copied to clipboard

Filled tabs

Copied to clipboard

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_Backgroundtransparent
--pf-c-tabs__button--Colorc_tabs__button_Color#151515
--pf-c-tabs__button--FontWeightc_tabs__button_FontWeight400
--pf-c-tabs__button--OutlineOffsetc_tabs__button_OutlineOffsetcalc(-1 * 0.25rem)
--pf-c-tabs__button--PaddingBottomc_tabs__button_PaddingBottom0.5rem
--pf-c-tabs__button--PaddingLeftc_tabs__button_PaddingLeft0.5rem
--pf-c-tabs__button--PaddingRightc_tabs__button_PaddingRight0.5rem
--pf-c-tabs__button--PaddingTopc_tabs__button_PaddingTop0.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_BorderWidth1px
--pf-c-tabs__item--hover--Colorc_tabs__item_hover_Color#72767b
--pf-c-tabs__item--m-current--BorderTopWidthc_tabs__item_m_current_BorderTopWidth2px
--pf-c-tabs__item--m-current--Colorc_tabs__item_m_current_Color#06c
--pf-c-tabs__item--m-current--ZIndexc_tabs__item_m_current_ZIndex200
--pf-c-tabs__scroll-button--Widthc_tabs__scroll_button_Width2rem
--pf-c-tabs__scroll-button--ZIndexc_tabs__scroll_button_ZIndex300
--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_BoxShadow0.75rem 0 0.625rem -0.25rem rgba(3,3,3,.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,.07)
--pf-c-tabs__scroll-button--m-secondary-right--m-start-current--Colorc_tabs__scroll_button_m_secondary_right_m_start_current_Color#06c