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
Default
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