Horizontal tab

Examples

Tab list and panels

Tabs are a navigational element used to show and pivot between related subsections of an interface.

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

Usage & types

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

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