React

Vertical tabs

IntroductionExamplesProps

Introduction

Note: Vertical tabs lives in its own package at @patternfly/react-catalog-view-extension!

This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.

Examples

Props

VerticalTabs properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullChildren nodes
classNamestring''Additional css classes
restrictTabsbooleanfalseFlag to restrict shown tabs to active tabs, their parents, their siblings, and direct children
activeTabbooleanfalseFlag if a direct child is active (only used in restrictTabs mode)
VerticalTabsTab properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullChild tab nodes (VerticalTabsTab's)
classNamestring''Additional css classes
titlestring | React.ReactNodenullTitle for the tab
wrapStyle'wrap' | 'truncate' | 'nowrap''wrap'Title wrap style
activebooleanfalseFlag if this is the active tab
hasActiveDescendantbooleanfalseFlag if a descendant tab is active (used only in restrictTabs mode)
shownbooleanfalseFlag to force show the tab (if parent tab is shown, used only in restrictTabs mode)
onActivate() => voidnullCallback function when the tab is activated