Vertical Tabs

Install the component dependency:

Include a React component in your project:

VerticalTabs.Group PropTypes

Name
Value
Description
Default
children
VerticalTabs.Tier1
VerticalTabs.Tier1 components
header
VerticalTabs.Group.Header
slot group header into position

VerticalTabs.Group.Header PropTypes

tagName
string
change default tag of header root tag
h2
children
string
header text

VerticalTabs.CollapsibleGroup PropTypes

children
VerticalTabs.Tier1
VerticalTabs.Tier1 components
header
VerticalTabs.CollapsibleGroup.Header
slot group header into position
startOpen
Boolean
group in open is open on first render
groupButtonAriaLabel
string
custom label for collapsible group toggle toggle for screenreaders

VerticalTabs.CollapsibleGroup.Header PropTypes

children
string
header text
tagName
string
change default tag of header root tag
h2

VerticalTabs.Tier1 PropTypes

active
boolean
changes visual state to active tab tier
children
VerticalTabs.Tier2
VerticalTabs.Tier2 components
header
VerticalTabs.Tier1.Header
slot tier1 header into position

VerticalTabs.Tier1.Header PropTypes

children
string
header text
icon
Icon
Icon component

VerticalTabs.Tier2 PropTypes

active
boolean
changes visual state to active tab tier
header
VerticalTabs.Tier2.Header
slot tier2 header into position

VerticalTabs.Tier2.Header PropTypes

children
string
header text
icon
Icon
Icon component

Using VerticalTabs sub components example

  • VerticalTabs
  • VerticalTabs.Divider
  • VerticalTabs.Group
  • VerticalTabs.Group.Header
  • VerticalTabs.CollapsibleGroup
  • VerticalTabs.CollapsibleGroup.Header
  • VerticalTabs.Tier1
  • VerticalTabs.Tier1.Header
  • VerticalTabs.Tier2
  • VerticalTabs.Tier2.Header

To use Tiers as links pass a href with or without onClick to Tier header

To use Tiers as button pass an onClick prop to Tier header without a href

Many users of this component are using it in conjunction with react-router. If you'd like to do the same and use VerticalTabs.Tier1 or VerticalTabs.Tier2 to trigger react-router links, you can follow this pattern.

  • Header Link