Skip to content
Patternfly Logo

Tabs

Examples

Default

Accessibility

Attribute
Applied to
Outcome
disabled
button.pf-c-tabs__link
Indicates that a tabs link is disabled. Required when disabled
aria-disabled="true"
a.pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled
Indicates to assistive technology that a tabs link is disabled. Required when disabled

Usage

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

Default overflow beginning of list

Accessibility

Attribute
Applied to
Outcome
disabled
.pf-c-tabs__scroll-button
Indicates 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-button
Hides the icon from assistive technologies.Required when not scrollable

Usage

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

Vertical

Box

Box overflow

Box vertical

Box tabs color scheme light 300

Inset

Inset box

Page insets

Usage

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

Icons and text

Tabs with sub tabs

Box tabs with sub tabs

Filled

Filled with icons

Filled box

Filled box with icons

Usage

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

Using the nav element

Vertical expandable

Vertical expanded

Vertical expandable (responsive)

Vertical expandable (legacy)

Containers

Vertical expanded (legacy)

Containers

Vertical expandable (responsive, legacy)

Containers

Close button











Add tab button





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

Attribute
Applied to
Outcome
aria-label="Descriptive text"
nav.pf-c-tabs, nav.pf-c-tabs.pf-m-secondary
Gives the <nav> an accessible label. Required when .pf-c-tabs is used with <nav>
aria-label="Descriptive text"
.pf-c-inline-edit__toggle > button
Provides an accessible description for toggle button. Required
disabled
button.pf-c-tabs__link
Indicates that a tabs link is disabled. Required when disabled
aria-disabled="true"
a.pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled
Indicates to assistive technology that a tabs link is disabled. Required when disabled
disabled
.pf-c-tabs__scroll-button
Indicates that a scroll button is disable, typically when at the first or last item of a list or scroll buttons are hidden. Required

Usage

Class
Applied to
Outcome
.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__item-close
<span>
Initiates a tabs component item close.
.pf-c-tabs__item-close-icon
<span>
Initiates a tabs component item close icon.
.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-c-tabs__add
<span>
Initiates a tabs component add button.
.pf-c-tabs__toggle
<div>
Initiates a tabs expandable toggle.
.pf-c-tabs__toggle-button
<button>
Initiates a tabs expandable toggle button.
.pf-c-tabs__toggle-icon
<span>
Initiates a tabs expandable toggle icon.
.pf-c-tabs__toggle-text
<span>
Initiates a tabs expandable toggle text.
.pf-m-secondary
.pf-c-tabs
Applies secondary styling to the tab component.
.pf-m-no-border-bottom
.pf-c-tabs
Removes bottom border from a tab component.
.pf-m-border-bottom
.pf-c-tabs
Adds a bottom border to secondary tabs.
.pf-m-box
.pf-c-tabs
Applies box styling to the tab component.
.pf-m-vertical
.pf-c-tabs
Applies vertical styling to the tab component.
.pf-m-fill
.pf-c-tabs
Modifies the tabs to fill the available space.
.pf-m-current
.pf-c-tabs__item
Indicates that a tab item is currently selected.
.pf-m-action
.pf-c-tabs__item
Indicates that a tab item contains actions other than the tab link.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}
.pf-c-tabs
Modifies the tabs component padding/inset to visually match padding of other adjacent components.
.pf-m-page-insets
.pf-c-tabs
Modifies the tabs component padding/inset to visually match padding of page elements.
.pf-m-color-scheme--light-300
.pf-c-tabs
Modifies the tabs component tab background colors.
.pf-m-expandable{-on-[breakpoint]}
.pf-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-c-tabs
Modifies the tabs component to be non-expandable at optional breakpoint.
.pf-m-expanded
.pf-c-tabs
Modifies the expandable tabs component for the expanded state.
.pf-m-disabled
a.pf-c-tabs__link
Modifies a tabs link for disabled styles.
.pf-m-aria-disabled
.pf-c-tabs__link
Modifies a tabs link for disabled styles, but is still hoverable/focusable.

CSS variables

.pf-c-tabs--pf-c-tabs--inset
0
.pf-c-tabs--pf-c-tabs--Width
auto
.pf-c-tabs--pf-c-tabs--before--BorderColor
#d2d2d2
.pf-c-tabs--pf-c-tabs--before--border-width--base
1px
.pf-c-tabs--pf-c-tabs--before--BorderTopWidth
0
.pf-c-tabs--pf-c-tabs--before--BorderRightWidth
0
.pf-c-tabs--pf-c-tabs--before--BorderBottomWidth
1px
.pf-c-tabs--pf-c-tabs--before--BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs--m-vertical--inset
1.5rem
.pf-c-tabs--pf-c-tabs--m-page-insets--inset
1rem
.pf-c-tabs--pf-c-tabs--m-page-insets--xl--inset
1.5rem
.pf-c-tabs--pf-c-tabs--m-vertical--Width
100%
.pf-c-tabs--pf-c-tabs--m-vertical--MaxWidth
15.625rem
.pf-c-tabs--pf-c-tabs--m-vertical--m-box--inset
2rem
.pf-c-tabs--pf-c-tabs--m-vertical__list--before--BorderColor
#d2d2d2
.pf-c-tabs--pf-c-tabs--m-vertical__list--before--BorderTopWidth
0
.pf-c-tabs--pf-c-tabs--m-vertical__list--before--BorderRightWidth
0
.pf-c-tabs--pf-c-tabs--m-vertical__list--before--BorderBottomWidth
0
.pf-c-tabs--pf-c-tabs--m-vertical__list--before--BorderLeftWidth
1px
.pf-c-tabs--pf-c-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--BorderRightWidth
1px
.pf-c-tabs--pf-c-tabs--m-color-scheme--light-300__link--BackgroundColor
transparent
.pf-c-tabs--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor
#f0f0f0
.pf-c-tabs--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor
#f5f5f5
.pf-c-tabs--pf-c-tabs__list--Display
flex
.pf-c-tabs--pf-c-tabs__list--Visibility
visible
.pf-c-tabs--pf-c-tabs__item--m-action--before--ZIndex
100
.pf-c-tabs--pf-c-tabs__item--m-action__link--PaddingRight
0.5rem
.pf-c-tabs--pf-c-tabs__link--Color
#6a6e73
.pf-c-tabs--pf-c-tabs__link--FontSize
1rem
.pf-c-tabs--pf-c-tabs__link--BackgroundColor
transparent
.pf-c-tabs--pf-c-tabs__link--OutlineOffset
calc(-1 * 0.375rem)
.pf-c-tabs--pf-c-tabs__link--PaddingTop
0.5rem
.pf-c-tabs--pf-c-tabs__link--PaddingRight
1rem
.pf-c-tabs--pf-c-tabs__link--PaddingBottom
0.5rem
.pf-c-tabs--pf-c-tabs__link--PaddingLeft
1rem
.pf-c-tabs--pf-c-tabs__link--disabled--BackgroundColor
#f5f5f5
.pf-c-tabs--pf-c-tabs__item--m-current__link--Color
#151515
.pf-c-tabs--pf-c-tabs__item--m-current__link--BackgroundColor
#fff
.pf-c-tabs--pf-c-tabs--m-vertical__link--PaddingTop
1rem
.pf-c-tabs--pf-c-tabs--m-vertical__link--PaddingBottom
1rem
.pf-c-tabs--pf-c-tabs--m-box__link--BackgroundColor
#f0f0f0
.pf-c-tabs--pf-c-tabs--m-box__link--disabled--BackgroundColor
#d2d2d2
.pf-c-tabs--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor
#b8bbbe
.pf-c-tabs--pf-c-tabs--m-secondary__link--FontSize
0.875rem
.pf-c-tabs--pf-c-tabs__link--before--border-color--base
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--border-width--base
1px
.pf-c-tabs--pf-c-tabs__link--before--BorderTopColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--BorderRightColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--BorderBottomColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--BorderLeftColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__link--before--BorderTopWidth
0
.pf-c-tabs--pf-c-tabs__link--before--BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__link--before--BorderBottomWidth
0
.pf-c-tabs--pf-c-tabs__link--before--BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs__link--before--Left
calc(1px * -1)
.pf-c-tabs--pf-c-tabs__link--disabled--before--BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__link--disabled--before--BorderBottomWidth
1px
.pf-c-tabs--pf-c-tabs__link--disabled--before--BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs__link--after--Top
auto
.pf-c-tabs--pf-c-tabs__link--after--Right
0
.pf-c-tabs--pf-c-tabs__link--after--Bottom
0
.pf-c-tabs--pf-c-tabs__link--after--BorderColor
#b8bbbe
.pf-c-tabs--pf-c-tabs__link--after--BorderWidth
0
.pf-c-tabs--pf-c-tabs__link--after--BorderTopWidth
0
.pf-c-tabs--pf-c-tabs__link--after--BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__link--after--BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs__link--hover--after--BorderWidth
3px
.pf-c-tabs--pf-c-tabs__link--focus--after--BorderWidth
3px
.pf-c-tabs--pf-c-tabs__link--active--after--BorderWidth
3px
.pf-c-tabs--pf-c-tabs__item--m-current__link--after--BorderColor
#06c
.pf-c-tabs--pf-c-tabs__item--m-current__link--after--BorderWidth
3px
.pf-c-tabs--pf-c-tabs__link--child--MarginRight
1rem
.pf-c-tabs--pf-c-tabs__scroll-button--Color
#151515
.pf-c-tabs--pf-c-tabs__scroll-button--hover--Color
#06c
.pf-c-tabs--pf-c-tabs__scroll-button--disabled--Color
#d2d2d2
.pf-c-tabs--pf-c-tabs__scroll-button--BackgroundColor
#fff
.pf-c-tabs--pf-c-tabs__scroll-button--Width
3rem
.pf-c-tabs--pf-c-tabs__scroll-button--xl--Width
4rem
.pf-c-tabs--pf-c-tabs__scroll-button--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-tabs--pf-c-tabs__scroll-button--TransitionDuration--margin
.125s
.pf-c-tabs--pf-c-tabs__scroll-button--TransitionDuration--transform
.125s
.pf-c-tabs--pf-c-tabs__scroll-button--TransitionDuration--opacity
.125s
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__scroll-button--before--border-width--base
1px
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderRightWidth
0
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderBottomWidth
1px
.pf-c-tabs--pf-c-tabs__scroll-button--before--BorderLeftWidth
0
.pf-c-tabs--pf-c-tabs__list--ScrollSnapTypeAxis
x
.pf-c-tabs--pf-c-tabs__list--ScrollSnapTypeStrictness
proximity
.pf-c-tabs--pf-c-tabs__list--ScrollSnapType
x proximity
.pf-c-tabs--pf-c-tabs__item--ScrollSnapAlign
end
.pf-c-tabs--pf-c-tabs--m-vertical__list--ScrollSnapTypeAxis
y
.pf-c-tabs--pf-c-tabs__toggle--Display
flex
.pf-c-tabs--pf-c-tabs__toggle--Visibility
hidden
.pf-c-tabs--pf-c-tabs__toggle--MarginBottom
0
.pf-c-tabs--pf-c-tabs--m-expanded__toggle--MarginBottom
1rem
.pf-c-tabs--pf-c-tabs__toggle-icon--Color
currentColor
.pf-c-tabs--pf-c-tabs__toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-tabs--pf-c-tabs__toggle-icon--Rotate
0
.pf-c-tabs--pf-c-tabs__toggle-text--MarginLeft
0
.pf-c-tabs--pf-c-tabs__toggle-button__toggle-text--MarginLeft
1rem
.pf-c-tabs--pf-c-tabs__toggle-button__toggle-text--Color
#151515
.pf-c-tabs--pf-c-tabs__toggle-button--MarginTop
calc(-1 * 0.375rem)
.pf-c-tabs--pf-c-tabs__toggle-button--MarginBottom
calc(-1 * 0.375rem)
.pf-c-tabs--pf-c-tabs__toggle-button--MarginLeft
calc(-1 * 1rem)
.pf-c-tabs--pf-c-tabs--m-expanded__toggle-icon--Color
#151515
.pf-c-tabs--pf-c-tabs--m-expanded__toggle-icon--Rotate
90deg
.pf-c-tabs--pf-c-tabs__item-close--c-button--FontSize
0.75rem
.pf-c-tabs--pf-c-tabs--m-secondary__item-close--c-button--FontSize
0.625rem
.pf-c-tabs--pf-c-tabs__item-close--c-button--PaddingTop
0.5rem
.pf-c-tabs--pf-c-tabs__item-close--c-button--PaddingBottom
0.5rem
.pf-c-tabs--pf-c-tabs__item-close--c-button--PaddingLeft
0.5rem
.pf-c-tabs--pf-c-tabs__item-close--c-button--OutlineOffset
-0.1875rem
.pf-c-tabs--pf-c-tabs__item-close-icon--MarginTop
0.125rem
.pf-c-tabs--pf-c-tabs__add--before--BorderColor
#d2d2d2
.pf-c-tabs--pf-c-tabs__add--before--BorderLeftWidth
1px
.pf-c-tabs--pf-c-tabs__add--c-button--FontSize
0.875rem
.pf-c-tabs--pf-c-tabs--m-secondary__add--c-button--FontSize
0.75rem
.pf-c-tabs--pf-c-tabs__add--c-button--PaddingTop
0.5rem
.pf-c-tabs--pf-c-tabs__add--c-button--PaddingBottom
0.5rem
.pf-c-tabs.pf-m-fill .pf-c-tabs__item:first-child--pf-c-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--BorderRightWidth
0
.pf-c-tabs.pf-m-secondary--pf-c-tabs--before--BorderBottomWidth
0
.pf-c-tabs.pf-m-secondary--pf-c-tabs__link--disabled--before--BorderBottomWidth
0
.pf-c-tabs.pf-m-secondary--pf-c-tabs__link--FontSize
0.875rem
.pf-c-tabs.pf-m-secondary--pf-c-tabs__item-close--c-button--FontSize
0.625rem
.pf-c-tabs.pf-m-secondary--pf-c-tabs__add--c-button--FontSize
0.75rem
.pf-c-tabs.pf-m-border-bottom--pf-c-tabs--before--BorderBottomWidth
1px
.pf-c-tabs.pf-m-border-bottom--pf-c-tabs__link--disabled--before--BorderBottomWidth
1px
.pf-c-tabs.pf-m-box .pf-c-tabs__link--pf-c-tabs__link--after--BorderBottomWidth
0
.pf-c-tabs.pf-m-box .pf-c-tabs__link--pf-c-tabs__link--after--BorderTopWidth
0
.pf-c-tabs.pf-m-box--pf-c-tabs__link--BackgroundColor
#f0f0f0
.pf-c-tabs.pf-m-box--pf-c-tabs__link--disabled--BackgroundColor
#d2d2d2
.pf-c-tabs.pf-m-box--pf-c-tabs__link--before--BorderBottomWidth
1px
.pf-c-tabs.pf-m-box--pf-c-tabs__link--before--BorderRightWidth
1px
.pf-c-tabs.pf-m-box--pf-c-tabs__link--disabled--before--BorderRightWidth
1px
.pf-c-tabs.pf-m-box--pf-c-tabs__link--after--Top
0
.pf-c-tabs.pf-m-box--pf-c-tabs__link--after--Bottom
auto
.pf-c-tabs.pf-m-box .pf-c-tabs__item:last-child--pf-c-tabs__link--before--BorderRightWidth
0
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current--pf-c-tabs__link--BackgroundColor
#fff
.pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current--pf-c-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--Left
0
.pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300--pf-c-tabs__link--BackgroundColor
transparent
.pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300--pf-c-tabs__item--m-current__link--BackgroundColor
#f0f0f0
.pf-c-tabs.pf-m-box.pf-m-color-scheme--light-300--pf-c-tabs__link--disabled--BackgroundColor
#f5f5f5
.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button--pf-c-button--m-plain--disabled--Color
#b8bbbe
.pf-c-tabs.pf-m-vertical--pf-c-tabs--Width
100%
.pf-c-tabs.pf-m-vertical--pf-c-tabs--inset
1.5rem
.pf-c-tabs.pf-m-vertical--pf-c-tabs--before--BorderBottomWidth
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--PaddingTop
1rem
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--PaddingBottom
1rem
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--before--Left
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--disabled--before--BorderBottomWidth
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--disabled--before--BorderLeftWidth
1px
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--after--Top
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--after--Bottom
0
.pf-c-tabs.pf-m-vertical--pf-c-tabs__link--after--Right
auto
.pf-c-tabs.pf-m-vertical--pf-c-tabs__list--ScrollSnapTypeAxis
y
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link--pf-c-tabs__link--after--BorderTopWidth
0
.pf-c-tabs.pf-m-vertical .pf-c-tabs__link--pf-c-tabs__link--after--BorderLeftWidth
0
.pf-c-tabs.pf-m-vertical.pf-m-expandable--pf-c-tabs__list--Display
none
.pf-c-tabs.pf-m-vertical.pf-m-expandable--pf-c-tabs__list--Visibility
hidden
.pf-c-tabs.pf-m-vertical.pf-m-expandable--pf-c-tabs__toggle--Display
flex
.pf-c-tabs.pf-m-vertical.pf-m-expandable--pf-c-tabs__toggle--Visibility
visible
.pf-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-c-tabs__list--Display
flex
.pf-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-c-tabs__list--Visibility
visible
.pf-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-c-tabs__toggle--Display
none
.pf-c-tabs.pf-m-vertical.pf-m-non-expandable--pf-c-tabs__toggle--Visibility
hidden
.pf-c-tabs.pf-m-vertical.pf-m-expanded--pf-c-tabs__list--Display
flex
.pf-c-tabs.pf-m-vertical.pf-m-expanded--pf-c-tabs__list--Visibility
visible
.pf-c-tabs.pf-m-vertical.pf-m-expanded--pf-c-tabs__toggle--MarginBottom
1rem
.pf-c-tabs.pf-m-vertical.pf-m-expanded--pf-c-tabs__toggle-icon--Color
#151515
.pf-c-tabs.pf-m-vertical.pf-m-expanded--pf-c-tabs__toggle-icon--Rotate
90deg
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs--inset
2rem
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs--m-vertical__list--before--BorderLeftWidth
0
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs--m-vertical__list--before--BorderRightWidth
1px
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs__link--disabled--before--BorderRightWidth
1px
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs__link--disabled--before--BorderBottomWidth
1px
.pf-c-tabs.pf-m-box.pf-m-vertical--pf-c-tabs__link--disabled--before--BorderLeftWidth
0
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item:last-child--pf-c-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--BorderRightWidth
1px
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current--pf-c-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--BorderBottomColor
#d2d2d2
.pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__item.pf-m-current--pf-c-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--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--BorderTopWidth
1px
.pf-c-tabs.pf-m-page-insets--pf-c-tabs--inset
1rem
.pf-c-tabs__toggle-button--pf-c-tabs__toggle-text--MarginLeft
1rem
.pf-c-tabs__toggle-button--pf-c-tabs__toggle-text--Color
#151515
.pf-c-tabs__item.pf-m-current--pf-c-tabs__link--Color
#151515
.pf-c-tabs__item.pf-m-current--pf-c-tabs__link--after--BorderColor
#06c
.pf-c-tabs__item.pf-m-current--pf-c-tabs__link--after--BorderWidth
3px
.pf-c-tabs__item.pf-m-action--pf-c-tabs__link--PaddingRight
0.5rem
.pf-c-tabs__item.pf-m-action--pf-c-tabs__link--after--BorderBottomWidth
0
.pf-c-tabs__item.pf-m-action:hover--pf-c-tabs__link--after--BorderWidth
3px
.pf-c-tabs__item.pf-m-action:focus-within--pf-c-tabs__link--after--BorderWidth
3px
.pf-c-tabs__item.pf-m-action:active--pf-c-tabs__link--after--BorderWidth
3px
.pf-c-tabs__item.pf-m-action.pf-m-disabled--pf-c-tabs__link--BackgroundColor
#f5f5f5
.pf-c-tabs__item.pf-m-action.pf-m-disabled--pf-c-tabs__link--before--BorderRightWidth
0
.pf-c-tabs__item.pf-m-action.pf-m-disabled--pf-c-tabs__link--before--BorderBottomWidth
1px
.pf-c-tabs__item.pf-m-action.pf-m-disabled--pf-c-tabs__link--before--BorderLeftWidth
0
.pf-c-tabs__item.pf-m-action.pf-m-disabled--pf-c-tabs__link--after--BorderWidth
0
.pf-c-tabs__link .pf-c-tabs__item-icon:last-child--pf-c-tabs__link--child--MarginRight
0
.pf-c-tabs__item-close .pf-c-button--pf-c-button--FontSize
0.75rem
.pf-c-tabs__item-close .pf-c-button--pf-c-button--PaddingTop
0.5rem
.pf-c-tabs__item-close .pf-c-button--pf-c-button--PaddingBottom
0.5rem
.pf-c-tabs__item-close .pf-c-button--pf-c-button--PaddingLeft
0.5rem
.pf-c-tabs__scroll-button:hover--pf-c-tabs__scroll-button--Color
#06c
.pf-c-tabs__scroll-button:nth-of-type(1)--pf-c-tabs__scroll-button--before--BorderRightWidth
1px
.pf-c-tabs__scroll-button:nth-of-type(2)--pf-c-tabs__scroll-button--before--BorderLeftWidth
1px
.pf-c-tabs__scroll-button:disabled--pf-c-tabs__scroll-button--Color
#d2d2d2
.pf-c-tabs__add .pf-c-button--pf-c-button--FontSize
0.875rem
.pf-c-tabs__add .pf-c-button--pf-c-button--PaddingTop
0.5rem
.pf-c-tabs__add .pf-c-button--pf-c-button--PaddingBottom
0.5rem
.pf-c-tabs.pf-m-inset-none--pf-c-tabs--inset
0
.pf-c-tabs.pf-m-inset-none--pf-c-tabs--m-vertical--inset
0
.pf-c-tabs.pf-m-inset-none--pf-c-tabs--m-vertical--m-box--inset
0
.pf-c-tabs.pf-m-inset-sm--pf-c-tabs--inset
0.5rem
.pf-c-tabs.pf-m-inset-sm--pf-c-tabs--m-vertical--inset
0.5rem
.pf-c-tabs.pf-m-inset-sm--pf-c-tabs--m-vertical--m-box--inset
0.5rem
.pf-c-tabs.pf-m-inset-md--pf-c-tabs--inset
1rem
.pf-c-tabs.pf-m-inset-md--pf-c-tabs--m-vertical--inset
1rem
.pf-c-tabs.pf-m-inset-md--pf-c-tabs--m-vertical--m-box--inset
1rem
.pf-c-tabs.pf-m-inset-lg--pf-c-tabs--inset
1.5rem
.pf-c-tabs.pf-m-inset-lg--pf-c-tabs--m-vertical--inset
1.5rem
.pf-c-tabs.pf-m-inset-lg--pf-c-tabs--m-vertical--m-box--inset
1.5rem
.pf-c-tabs.pf-m-inset-xl--pf-c-tabs--inset
2rem
.pf-c-tabs.pf-m-inset-xl--pf-c-tabs--m-vertical--inset
2rem
.pf-c-tabs.pf-m-inset-xl--pf-c-tabs--m-vertical--m-box--inset
2rem
.pf-c-tabs.pf-m-inset-2xl--pf-c-tabs--inset
3rem
.pf-c-tabs.pf-m-inset-2xl--pf-c-tabs--m-vertical--inset
3rem
.pf-c-tabs.pf-m-inset-2xl--pf-c-tabs--m-vertical--m-box--inset
3rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines