Skip to content

Tabs

Tabs group similar content within sub-views of a page.

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





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.

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

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--Transition
all 250ms cubic-bezier(.42, 0, .58, 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--Transition
.2s ease-in 0s
.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

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines