Skip to content

Tabs

Examples

Default

Default tabs example

Default tabs usage

Class
Applied to
Outcome
.pf-m-disabled
a.pf-v6-c-tabs__link
Modifies a tabs link for disabled styles.
.pf-m-aria-disabled
.pf-v6-c-tabs__link
Modifies a tabs link for disabled styles, but is still hoverable/focusable.

Overflow

Overflow beginning of list example

Overflow beginning of list usage

Class
Applied to
Outcome
.pf-m-scrollable
.pf-v6-c-tabs
Enables the directional scroll buttons.
.pf-v6-c-tabs__scroll-button
<div>
Initiates a tabs component scroll button container.

Horizontal overflow example

Horizontal overflow expanded example

Horizontal overflow selected example

Vertical

Vertical tabs example

Vertical expandable example

Vertical expanded example

Vertical expandable responsive example

Vertical expandable example (deprecated)

Containers

Vertical expanded example (deprecated)

Containers

Vertical expandable responsive example (deprecated)

Containers

Box

Box tabs example

Box overflow example

Box vertical example

Box tabs secondary variant example

Tab insets

Default tab insets example

Box tab insets example

Page insets example

Insets usage

Class
Applied to
Outcome
.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}
.pf-v6-c-tabs
Modifies the tabs component padding/inset to visually match padding of other adjacent components.
.pf-m-page-insets
.pf-v6-c-tabs
Modifies the tabs component padding/inset to visually match padding of page elements.

Icons

Icons and text example

Sub tabs

Tabs with sub tabs example

Box tabs with sub tabs example

Filled

Filled tabs example

Filled with icons example

Filled box example

Filled box with icons example

Filled usage

Class
Applied to
Outcome
.pf-m-fill
.pf-v6-c-tabs
Modifies the tabs to fill the available space. Required

Tabs as navigation

Using the nav element example

Sub tabs using the nav element example

Tab item actions

Help button example











Close button example











Help and close button example











Add tab button

Add tab button example





Animate current tab accent

To animate the current tab accent, you must set the following variables on the .pf-v6-c-tabs wrapper. As tabs are added, removed, and resized, these values may need to be updated dynamically. The following examples use static values for these variables and are not updated dynamically, so there may be styling issues. For more functional examples, see the react tabs component examples.

  • --pf-v6-c-tabs--link-accent--start - the left offset of the current tab
  • --pf-v6-c-tabs--link-accent--length - the width of the current tab

Animate default tabs accent

Animate sub tabs accent

Animate filled tabs accent

Animate vertical tabs accent

Tab content

Default tab content example

Panel 1

Padding

Panel 1

Secondary

Panel 1

Documentation

Tabs 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.

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.

Usage

Class
Applied to
Outcome
.pf-v6-c-tabs
<nav>, <div>
Initiates the tabs component. Required
.pf-v6-c-tabs__list
<ul>
Initiates a tabs component list. Required
.pf-v6-c-tabs__item
<li>
Initiates a tabs component item. Required
.pf-v6-c-tabs__item-text
<span>
Initiates a tabs component item icon. Required
.pf-v6-c-tabs__item-icon
<span>
Initiates a tabs component item text. Required
.pf-v6-c-tabs__item-close
<span>
Initiates a tabs component item close.
.pf-v6-c-tabs__item-close-icon
<span>
Initiates a tabs component item close icon.
.pf-v6-c-tabs__link
<button>, <a>
Initiates a tabs component link. Required
.pf-v6-c-tabs__scroll-button
<div>
Initiates a tabs component scroll button container.
.pf-v6-c-tabs__add
<span>
Initiates a tabs component add button.
.pf-v6-c-tabs__toggle
<div>
Initiates a tabs expandable toggle.
.pf-v6-c-tabs__toggle-button
<button>
Initiates a tabs expandable toggle button.
.pf-v6-c-tabs__toggle-icon
<span>
Initiates a tabs expandable toggle icon.
.pf-v6-c-tabs__toggle-text
<span>
Initiates a tabs expandable toggle text.
.pf-m-subtab
.pf-v6-c-tabs
Applies subtab styling to the tab component.
.pf-m-no-border-bottom
.pf-v6-c-tabs
Removes bottom border from a tab component.
.pf-m-box
.pf-v6-c-tabs
Applies box styling to the tab component.
.pf-m-vertical
.pf-v6-c-tabs
Applies vertical styling to the tab component.
.pf-m-fill
.pf-v6-c-tabs
Modifies the tabs to fill the available space.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}
.pf-v6-c-tabs
Modifies tabs horizontal padding at optional breakpoint.
.pf-m-page-insets
.pf-v6-c-tabs
Modifies the tabs component padding/inset to visually match padding of page elements.
.pf-m-secondary
.pf-v6-c-tabs.pf-m-box
Modifies the tabs component tab background colors for the box variant.
.pf-m-expandable{-on-[breakpoint]}
.pf-v6-c-tabs
Modifies the tabs component to be expandable via a toggle at optional breakpoint. Note: works with vertical tabs only.
.pf-m-non-expandable{-on-[breakpoint]}
.pf-v6-c-tabs
Modifies the tabs component to be non-expandable at optional breakpoint.
.pf-m-expanded
.pf-v6-c-tabs
Modifies the expandable tabs component for the expanded state.
.pf-m-animate-current
.pf-v6-c-tabs
Modifies tabs to animate movement of the current tab accent line.
.pf-m-initializing-accent
.pf-v6-c-tabs.pf-m-animate-current
Modifies tabs styles while initializing the "current" tab's accent styles.
--pf-v6-c-tabs--link-accent--start
.pf-v6-c-tabs.pf-m-animate-current
Sets the value for the "start" inset of the current tab's accent.
--pf-v6-c-tabs--link-accent--length
.pf-v6-c-tabs.pf-m-animate-current
Sets the value for the length of the current tab's accent.
.pf-m-current
.pf-v6-c-tabs__item
Indicates that a tab item is currently selected.
.pf-m-action
.pf-v6-c-tabs__item
Indicates that a tab item contains actions other than the tab link.
.pf-m-overflow
.pf-v6-c-tabs__item
Applies overflow menu styling to a tab item.
.pf-m-expanded
.pf-v6-c-tabs__item
Applies expanded styling to the overflow menu tab item.
.pf-m-disabled
a.pf-v6-c-tabs__link
Modifies a tabs link for disabled styles.
.pf-m-aria-disabled
.pf-v6-c-tabs__link
Modifies a tabs link for disabled styles, but is still hoverable/focusable.

Tab content accessibility

Attribute
Applied to
Outcome
role="tabpanel"
.pf-v6-c-tab-content
Indicates that the element serves as a container for a set of tabs. Required
aria-labelledby=[ID of tab element]
.pf-v6-c-tab-content
Provides an accessible name for the tab panel by referring to the tab element that controls it. Required
id=[ID of tab panel]
.pf-v6-c-tab-content
Provides an ID for the tab panel, and should be used as the value of aria-controls on the tab element that controls the panel. Required
hidden
.pf-v6-c-tab-content
Indicates that the tab panel is not visible. Required on all but the active tab panel
tabindex="0"
.pf-v6-c-tab-content
Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. Required

Tab content usage

Class
Applied to
Outcome
.pf-v6-c-tab-content
<section>
Initiates the tab content component. Required
.pf-v6-c-tab-content__body
<div>
Initiates the tab content body component.
.pf-m-padding
.pf-v6-c-tab-content__body
Modifies the tab content body component padding.
.pf-m-secondary
.pf-v6-c-tab-content
Modifies the tab content component for secondary styles.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-tabs--pf-v6-c-tabs--inset
0
.pf-v6-c-tabs--pf-v6-c-tabs--Width
auto
.pf-v6-c-tabs--pf-v6-c-tabs--before--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs--before--border-width--base
1px
.pf-v6-c-tabs--pf-v6-c-tabs--before--BorderBlockStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs--before--BorderInlineEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs--before--BorderBlockEndWidth
1px
.pf-v6-c-tabs--pf-v6-c-tabs--before--BorderInlineStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical--inset
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-page-insets--inset
1rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical--Width
100%
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical--MaxWidth
15.625rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical--m-box--inset
1rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__list--before--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__list--before--BorderBlockStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth
1px
.pf-v6-c-tabs--pf-v6-c-tabs__list--Display
flex
.pf-v6-c-tabs--pf-v6-c-tabs__item--BackgroundColor
transparent
.pf-v6-c-tabs--pf-v6-c-tabs__item--PaddingBlockStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__item--PaddingBlockEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__item--PaddingInlineStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__item--PaddingInlineEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__item--ColumnGap
0.25rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__item--PaddingInlineStart
1rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd
1rem
.pf-v6-c-tabs--pf-v6-c-tabs__item--m-current--BackgroundColor
transparent
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__item--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__item--m-current--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-tabs--pf-v6-c-tabs__item--m-action--before--ZIndex
200
.pf-v6-c-tabs--pf-v6-c-tabs__link--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs--pf-v6-c-tabs__link--FontSize
0.875rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs--pf-v6-c-tabs__link--BorderRadius
6px
.pf-v6-c-tabs--pf-v6-c-tabs__link--PaddingBlockStart
0.25rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--PaddingInlineEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--PaddingBlockEnd
0.25rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--PaddingInlineStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--ColumnGap
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs--pf-v6-c-tabs__link--disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-tabs--pf-v6-c-tabs__item--m-current__link--Color
(In light theme) #151515
.pf-v6-c-tabs--pf-v6-c-tabs__item--m-current__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__link--PaddingInlineStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__link--disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__link--disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-tabs--pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-tabs--pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs--pf-v6-c-tabs--m-subtab__link--FontSize
0.75rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--border-color--base
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--border-width--base
1px
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderBlockStartColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderInlineEndColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderInlineStartColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderBlockStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderInlineEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderBlockEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--BorderInlineStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--before--InsetInlineStart
calc(1px * -1)
.pf-v6-c-tabs--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth
1px
.pf-v6-c-tabs--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--InsetBlockStart
auto
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--InsetInlineEnd
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--InsetBlockEnd
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--BorderWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--BorderBlockStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--BorderInlineEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__link--after--BorderInlineStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__item--m-current__link--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-tabs--pf-v6-c-tabs__item--m-current__link--after--BorderWidth
3px
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--PaddingBlockStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--PaddingBlockEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--PaddingInlineStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--PaddingInlineEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--Width
3rem
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--TransitionDuration--margin
.125s
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--TransitionDuration--transform
.125s
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--TransitionDuration--opacity
.125s
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--before--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--before--border-width--base
1px
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--before--BorderBlockEndWidth
1px
.pf-v6-c-tabs--pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth
0
.pf-v6-c-tabs--pf-v6-c-tabs__list--ScrollSnapTypeAxis
x
.pf-v6-c-tabs--pf-v6-c-tabs__list--ScrollSnapTypeStrictness
proximity
.pf-v6-c-tabs--pf-v6-c-tabs__list--ScrollSnapType
x proximity
.pf-v6-c-tabs--pf-v6-c-tabs__item--ScrollSnapAlign
end
.pf-v6-c-tabs--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis
y
.pf-v6-c-tabs--pf-v6-c-tabs__toggle--Display
flex
.pf-v6-c-tabs--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-tabs--pf-v6-c-tabs__toggle-icon--TransitionDuration
100ms
.pf-v6-c-tabs--pf-v6-c-tabs__toggle-icon--Transition
transform 100ms cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-tabs--pf-v6-c-tabs__toggle-icon--Rotate
0
.pf-v6-c-tabs--pf-v6-c-tabs--m-expanded__toggle-icon--Rotate
90deg
.pf-v6-c-tabs--pf-v6-c-tabs--m-expandable--RowGap
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-expandable--PaddingBlockStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-expandable--PaddingBlockEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-expandable--PaddingInlineStart
1rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-expandable--PaddingInlineEnd
1rem
.pf-v6-c-tabs--pf-v6-c-tabs__item-action--c-button--FontSize
0.875rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize
0.75rem
.pf-v6-c-tabs--pf-v6-c-tabs__item-action-icon--MarginBlockStart
0.125rem
.pf-v6-c-tabs--pf-v6-c-tabs__add--before--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-tabs--pf-v6-c-tabs__add--before--BorderInlineStartWidth
1px
.pf-v6-c-tabs--pf-v6-c-tabs__add--c-button--FontSize
0.875rem
.pf-v6-c-tabs--pf-v6-c-tabs--m-subtab__add--c-button--FontSize
0.75rem
.pf-v6-c-tabs--pf-v6-c-tabs__add--PaddingBlockStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__add--PaddingBlockEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__add--PaddingInlineStart
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__add--PaddingInlineEnd
0.5rem
.pf-v6-c-tabs--pf-v6-c-tabs__link-toggle-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-tabs--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-tabs--pf-v6-c-tabs__link-toggle-icon--TransitionDuration
100ms
.pf-v6-c-tabs--pf-v6-c-tabs__link-toggle-icon--Transition
transform 100ms cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-tabs--pf-v6-c-tabs__link-toggle-icon--Rotate
0
.pf-v6-c-tabs--pf-v6-c-tabs__link-toggle-icon--FontSize
0.875rem
.pf-v6-c-tabs--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate
90deg
.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:first-child--pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth
0
.pf-v6-c-tabs.pf-m-fill .pf-v6-c-tabs__item:last-child--pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth
0
.pf-v6-c-tabs.pf-m-no-border-bottom--pf-v6-c-tabs--before--BorderBlockEndWidth
0
.pf-v6-c-tabs.pf-m-no-border-bottom--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth
0
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link--pf-v6-c-tabs__link--after--BorderBlockEndWidth
0
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link--pf-v6-c-tabs__link--after--BorderBlockStartWidth
0
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__item--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__item--m-current--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__item--m-current__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--before--BorderBlockEndWidth
1px
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--after--InsetBlockStart
0
.pf-v6-c-tabs.pf-m-box--pf-v6-c-tabs__link--after--InsetBlockEnd
auto
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item:last-child--pf-v6-c-tabs__link--before--BorderInlineEndWidth
0
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--before--BorderBlockEndColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current + .pf-v6-c-tabs__item--pf-v6-c-tabs__link--before--InsetInlineStart
0
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__item--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__item--m-current--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__link--disabled--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__link--disabled--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__link--hover--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-tabs.pf-m-box.pf-m-secondary--pf-v6-c-tabs__item--m-current__link--BackgroundColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs--Width
100%
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs--inset
0.5rem
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs--before--BorderBlockEndWidth
0
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__item--PaddingInlineStart
1rem
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__item--PaddingInlineEnd
1rem
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--PaddingInlineStart
0.5rem
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--PaddingInlineEnd
0.5rem
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--before--InsetInlineStart
0
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth
0
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth
1px
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--after--InsetBlockStart
0
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--after--InsetBlockEnd
0
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__link--after--InsetInlineEnd
auto
.pf-v6-c-tabs.pf-m-vertical--pf-v6-c-tabs__list--ScrollSnapTypeAxis
y
.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link--pf-v6-c-tabs__link--after--BorderBlockStartWidth
0
.pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__link--pf-v6-c-tabs__link--after--BorderInlineStartWidth
0
.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable--pf-v6-c-tabs__list--Display
none
.pf-v6-c-tabs.pf-m-vertical.pf-m-expandable--pf-v6-c-tabs__toggle--Display
flex
.pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-v6-c-tabs__list--Display
flex
.pf-v6-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-v6-c-tabs__toggle--Display
none
.pf-v6-c-tabs.pf-m-vertical.pf-m-expanded--pf-v6-c-tabs__list--Display
flex
.pf-v6-c-tabs.pf-m-vertical.pf-m-expanded--pf-v6-c-tabs__toggle-icon--Rotate
90deg
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs--inset
1rem
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth
0
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth
1px
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs__link--before--BorderInlineEndWidth
1px
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth
1px
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth
1px
.pf-v6-c-tabs.pf-m-box.pf-m-vertical--pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth
0
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:last-child--pf-v6-c-tabs__link--before--BorderInlineEndWidth
1px
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child--pf-v6-c-tabs__link--before--BorderBlockStartWidth
1px
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--before--BorderInlineEndColor
(In light theme) rgba(255, 255, 255, 0.0000)
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--before--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current--pf-v6-c-tabs__link--before--BorderBlockStartWidth
1px
.pf-v6-c-tabs.pf-m-subtab--pf-v6-c-tabs__link--FontSize
0.75rem
.pf-v6-c-tabs.pf-m-subtab--pf-v6-c-tabs__item-action--c-button--FontSize
0.75rem
.pf-v6-c-tabs.pf-m-subtab--pf-v6-c-tabs__add--c-button--FontSize
0.75rem
.pf-v6-c-tabs.pf-m-page-insets--pf-v6-c-tabs--inset
1rem
.pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--Color
(In light theme) #151515
.pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--after--BorderColor
(In light theme) #0066cc
.pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__link--after--BorderWidth
3px
.pf-v6-c-tabs__item.pf-m-current--pf-v6-c-tabs__item--BackgroundColor
transparent
.pf-v6-c-tabs__item.pf-m-action--pf-v6-c-tabs__link--after--BorderBlockEndWidth
0
.pf-v6-c-tabs__link:where(:hover, :focus)--pf-v6-c-tabs__link--BackgroundColor
(In light theme) rgba(199, 199, 199, 0.2500)
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled--pf-v6-c-tabs__link--Color
(In light theme) #4d4d4d
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled--pf-v6-c-tabs__link--before--BorderInlineEndWidth
0
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled--pf-v6-c-tabs__link--before--BorderBlockEndWidth
1px
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled--pf-v6-c-tabs__link--before--BorderInlineStartWidth
0
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled--pf-v6-c-tabs__link--after--BorderWidth
0
.pf-v6-c-tabs__item.pf-m-action.pf-m-disabled--pf-v6-c-tabs__link--BackgroundColor
transparent
.pf-v6-c-tabs__link:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled)--pf-v6-c-tabs__link--BackgroundColor
(In light theme) #c7c7c7
.pf-v6-c-tabs__link.pf-m-expanded--pf-v6-c-tabs__link-toggle-icon--Rotate
90deg
.pf-v6-c-tabs__item-action .pf-v6-c-button--pf-v6-c-button--FontSize
0.875rem
.pf-v6-c-tabs__scroll-button:nth-of-type(1)--pf-v6-c-tabs__scroll-button--before--BorderInlineEndWidth
1px
.pf-v6-c-tabs__scroll-button:nth-of-type(2)--pf-v6-c-tabs__scroll-button--before--BorderInlineStartWidth
1px
.pf-v6-c-tabs__add .pf-v6-c-button--pf-v6-c-button--FontSize
0.875rem
.pf-v6-c-tabs.pf-m-inset-none--pf-v6-c-tabs--inset
0
.pf-v6-c-tabs.pf-m-inset-none--pf-v6-c-tabs--m-vertical--inset
0
.pf-v6-c-tabs.pf-m-inset-none--pf-v6-c-tabs--m-vertical--m-box--inset
0
.pf-v6-c-tabs.pf-m-inset-sm--pf-v6-c-tabs--inset
0.5rem
.pf-v6-c-tabs.pf-m-inset-sm--pf-v6-c-tabs--m-vertical--inset
0.5rem
.pf-v6-c-tabs.pf-m-inset-sm--pf-v6-c-tabs--m-vertical--m-box--inset
0.5rem
.pf-v6-c-tabs.pf-m-inset-md--pf-v6-c-tabs--inset
1rem
.pf-v6-c-tabs.pf-m-inset-md--pf-v6-c-tabs--m-vertical--inset
1rem
.pf-v6-c-tabs.pf-m-inset-md--pf-v6-c-tabs--m-vertical--m-box--inset
1rem
.pf-v6-c-tabs.pf-m-inset-lg--pf-v6-c-tabs--inset
1.5rem
.pf-v6-c-tabs.pf-m-inset-lg--pf-v6-c-tabs--m-vertical--inset
1.5rem
.pf-v6-c-tabs.pf-m-inset-lg--pf-v6-c-tabs--m-vertical--m-box--inset
1.5rem
.pf-v6-c-tabs.pf-m-inset-xl--pf-v6-c-tabs--inset
2rem
.pf-v6-c-tabs.pf-m-inset-xl--pf-v6-c-tabs--m-vertical--inset
2rem
.pf-v6-c-tabs.pf-m-inset-xl--pf-v6-c-tabs--m-vertical--m-box--inset
2rem
.pf-v6-c-tabs.pf-m-inset-2xl--pf-v6-c-tabs--inset
3rem
.pf-v6-c-tabs.pf-m-inset-2xl--pf-v6-c-tabs--m-vertical--inset
3rem
.pf-v6-c-tabs.pf-m-inset-2xl--pf-v6-c-tabs--m-vertical--m-box--inset
3rem

Edit this page on GitHub