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.

Menu stuff 3

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
`active`	`boolean`	styled active (automatically set)
`href`	`string`	url of resource (renders as anchor)
`id` Required	`string\|number`	id tying list item to panel
`onClick` Required	`Event => void`	callback when list item clicked

Tab.Panel

Name	Type	Description	Default
`labelledBy` Required	`string\|number`	id tying panel to list item