Skip to content
PatternFly logo

Tabs

Tabs allow users to navigate between views within the same page or context.

Most tab variations are available as open (default) or box style tabs. Select the 'isBox' checkbox to preview an example with box styled tabs. The Tabs items background can be also toggled with 'Tab light variation' checkbox. Similarly the 'Tab content light variation' checkbox affects the TabContent background.

Examples

Default

When passing in a Tooltip component to the Tab component, the Tooltip can also be passed in directly to the tooltip prop.

Users

With tooltip react ref

When using a React ref to link a Tooltip to a Tab component via the reference prop, you should avoid manually passing in a value of "off" to the aria-live prop. Doing so may lead to the tooltip becoming less accessible to assistive technologies.

The tooltip should also have the id prop passed in. The value given to this prop should then be passed into the tab's aria-describedby prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.

Users

Uncontrolled

Users

Box light variation

Users

Default overflow

Users

Horizontal overflow Beta

Users

Vertical

Users

Vertical expandable

Users

Vertical expandable uncontrolled

Users

Inset

Users

Page Insets

Users

Icons and text

Users

Tabs with sub tabs

Filled

Users

Filled with icons

Users

Using the nav element

Users

Separate content

Tab 1 section

Tab content with body and padding

Tab 1 section with body and padding

Children mounting on click

Tab 1 section

Unmounting invisible children

Tab 1 section

Toggled separate content


Tab 1 section

Dynamic

To enable closeable tabs, pass the onClose property to Tabs, and to enable the add button, pass the onAdd property to Tabs. Aria labels may be controlled manually by passing closeButtonAriaLabel to Tab and addButtonAriaLabel to Tabs.

Terminal 1

Help action

Users

Help and close actions

Terminal 1

Props

Tabs

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent rendered inside the tabs component. Must be React.ReactElement<TabProps>[]
activeKeynumber | string0The index of the active tab
addButtonAriaLabelstringAria-label for the add button
aria-labelstringProvides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page.
classNamestringAdditional classes added to the tabs
component'div' | 'nav'TabsComponent.divDetermines what tag is used around the tabs. Use "nav" to define the tabs inside a navigation region
defaultActiveKeynumber | stringThe index of the default active tab. Set this for uncontrolled Tabs
defaultIsExpandedbooleanFlag indicating the default expanded state for uncontrolled expand/collapse of
expandable{ default?: 'expandable' | 'nonExpandable'; sm?: 'expandable' | 'nonExpandable'; md?: 'expandable' | 'nonExpandable'; lg?: 'expandable' | 'nonExpandable'; xl?: 'expandable' | 'nonExpandable'; '2xl'?: 'expandable' | 'nonExpandable'; }Enable expandable vertical tabs at various breakpoints. (isVertical should be set to true for this to work)
hasBorderBottombooleantrueEnables border bottom tab styling on tabs. Defaults to true. To remove the bottom border, set this prop to false.
hasSecondaryBorderBottombooleanEnables border bottom styling for secondary tabs
idstringUniquely identifies the tabs
inset{ default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; }Insets at various breakpoints.
isBoxbooleanfalseEnables box styling to the tab component
isExpandedbooleanFlag to indicate if the vertical tabs are expanded
isFilledbooleanfalseEnables the filled tab list layout
isOverflowHorizontalBetaboolean | HorizontalOverflowObjectFlag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab.
isSecondarybooleanfalseEnables secondary tab styling
isVerticalbooleanfalseEnables vertical tab styling
leftScrollAriaLabelstring'Scroll left'Aria-label for the left scroll button
mountOnEnterbooleanfalseWaits until the first "enter" transition to mount tab children (add them to the DOM)
onAdd(event: React.MouseEvent<HTMLElement, MouseEvent>) => voidCallback for the add button. Passing this property inserts the add button
onClose(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => voidCallback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property.
onSelect(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void() => undefined as anyCallback to handle tab selection
onToggle(isExpanded: boolean) => void(isExpanded): void => undefinedCallback function to toggle the expandable tabs.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
rightScrollAriaLabelstring'Scroll right'Aria-label for the right scroll button
toggleAriaLabelstringAria-label for the expandable toggle
toggleTextstringText that appears in the expandable toggle
unmountOnExitbooleanfalseUnmounts tab children (removes them from the DOM) when they are no longer visible
usePageInsetsbooleanFlag indicates that the tabs should use page insets.
variant'default' | 'light300''default'Tabs background color variant

Tab

*required
NameTypeDefaultDescription
eventKeyrequirednumber | stringuniquely identifies the tab
titlerequiredReact.ReactNodeContent rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling.
actionsBetaReact.ReactNodeActions rendered beside the tab content
childrenReact.ReactNodecontent rendered inside the Tab content area.
classNamestringadditional classes added to the Tab
closeButtonAriaLabelBetastringAria-label for the close button added by passing the onClose property to Tabs.
hrefstringURL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs component="nav"> should have an href.
innerRefReact.Ref<any>Forwarded ref
inoperableEventsstring[]Events to prevent when the button is in an aria-disabled state
isAriaDisabledbooleanAdds disabled styling and communicates that the button is disabled using the aria-disabled html attribute
isCloseDisabledBetabooleanFlag indicating the close button should be disabled
isDisabledbooleanAdds disabled styling and disables the button using the disabled html attribute
isHiddenbooleanwhether to render the tab or not
ouiaIdnumber | stringValue to set the data-ouia-component-id for the tab button.
tabContentIdstring | numberchild id for case in which a TabContent section is defined outside of a Tabs component
tabContentRefReact.RefObject<any>child reference for case in which a TabContent section is defined outside of a Tabs component
tooltipReact.ReactElement<any>Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering.

TabAction

*required
NameTypeDefaultDescription
aria-labelstringAccessible label for the tab action
childrenReact.ReactNodeContent rendered in the tab action
classNamestringAdditional classes added to the tab action span
isDisabledbooleanFlag indicating if the tab action is disabled
onClick(event: React.MouseEvent<HTMLElement, MouseEvent>) => voidClick callback for tab action button

TabContent

*required
NameTypeDefaultDescription
idrequiredstringid passed from parent to identify the content section
activeKeynumber | stringIdentifies the active Tab
aria-labelstringtitle of controlling Tab if used outside Tabs component
childReact.ReactElement<any>Child to show in the content area
childrenanycontent rendered inside the tab content area if used outside Tabs component
classNamestringclass of tab content area if used outside Tabs component
eventKeynumber | stringuniquely identifies the controlling Tab if used outside Tabs component
innerRefReact.Ref<any>Callback for the section ref
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

TabTitleText

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeText to be rendered inside the tab button title.
classNamestring''additional classes added to the tab title text

TabTitleIcon

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeIcon to be rendered inside the tab button title.
classNamestring''additional classes added to the tab title icon

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__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--Color
#6a6e73
.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-action--c-button--disabled--BackgroundColor
#b8bbbe
.pf-c-tabs--pf-c-tabs--m-secondary__link--FontSize
0.875rem
.pf-c-tabs--pf-c-tabs__item--m-action__link--PaddingRight
0.25rem
.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-action--c-button--FontSize
0.75rem
.pf-c-tabs--pf-c-tabs--m-secondary__item-action--c-button--FontSize
0.625rem
.pf-c-tabs--pf-c-tabs__item-action--c-button--PaddingTop
0.5rem
.pf-c-tabs--pf-c-tabs__item-action--c-button--PaddingRight
0.5rem
.pf-c-tabs--pf-c-tabs__item-action--c-button--PaddingBottom
0.5rem
.pf-c-tabs--pf-c-tabs__item-action--c-button--PaddingLeft
0.5rem
.pf-c-tabs--pf-c-tabs__item-action--last-child--c-button--PaddingRight
1rem
.pf-c-tabs--pf-c-tabs__item-action--c-button--OutlineOffset
-0.1875rem
.pf-c-tabs--pf-c-tabs__item-action-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-c-tabs__add--c-button--OutlineOffset
calc(-1 * 0.25rem)
.pf-c-tabs--pf-c-tabs__link-toggle-icon--Color
#6a6e73
.pf-c-tabs--pf-c-tabs__link-toggle-icon--Transition
.2s ease-in 0s
.pf-c-tabs--pf-c-tabs__link-toggle-icon--Rotate
0
.pf-c-tabs--pf-c-tabs__link-toggle-icon--FontSize
0.875rem
.pf-c-tabs--pf-c-tabs__link--m-expanded__toggle-icon--Color
#151515
.pf-c-tabs--pf-c-tabs__link--m-expanded__toggle-icon--Rotate
90deg
.pf-c-tabs--pf-c-tabs__link--hover__toggle-icon--Color
#151515
.pf-c-tabs--pf-c-tabs__link--active__toggle-icon--Color
#151515
.pf-c-tabs--pf-c-tabs__link--focus__toggle-icon--Color
#151515
.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-action--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-action .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