Horizontal tab

Use tabs to organize content into multiple sections and allow users to navigate between them.

  • Install
    npm install @pluralsight/ps-design-system-tab
  • Import
    import Tab from '@pluralsight/ps-design-system-tab'

Example

Panels are wrappers that provide an accessibility link between the Tab.ListItem and your content. Ensure your ids match to make the link.

import Tab from '@pluralsight/ps-design-system-tab'
import { P } from '@pluralsight/ps-design-system-text'
import React from 'react'
function Example() {
const [activeIndex, setActiveIndex] = React.useState(2)
const menus = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map(i => ({
id: `example${i}`,
label: `Menu ${i}`,
content: `Menu stuff ${i}`
}))
return (
<>
<Tab.List>
{menus.map((menu, i) => (
<Tab.ListItem
id={menu.id}
key={menu.id}
onClick={() => setActiveIndex(i)}
{...(i === activeIndex ? { active: true } : null)}
>
{menu.label}
</Tab.ListItem>
))}
</Tab.List>
{menus.map((menu, i) =>
i === activeIndex ? (
<Tab.Panel labelledBy={menu.id} key={menu.id}>
<P>{menu.content}</P>
</Tab.Panel>
) : null
)}
</>
)
}
export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

WAI-ARIA Patterns: Tabs

Props

Tab

Name
Type
Description
Default
activebooleanstyled active (automatically set)
hrefstringurl of resource (renders as anchor)
id
Required
string|numberid tying list item to panel
onClick
Required
Event => voidcallback when list item clicked

Tab.Panel

Name
Type
Description
Default
labelledBy
Required
string|numberid tying panel to list item