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
  • Install
    npm install @pluralsight/ps-design-system-tab
  • Import
    import Tab from '@pluralsight/ps-design-system-tab'

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