ContextQMD
Back to Evergreen

Introduction

docs/documentation/components/tabs.mdx

7.1.93.5 KB
Original Source

Introduction

Evergreen exports the following components to build tabbed navigation.

  • Tab: the base horizontal tab component.
  • Tablist: a accessibility helper component used when tabs toggle panels on the page.
  • TabNavigation: a accessibility helper component used when tabs are links.

Accessibility

The Tab component should be wrapped in a Tablist or TabNavigation component to comply to WAI-ARIA accessibility standards.

jsx
function BasicTabsExample() {
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const [tabs] = React.useState(['Traits', 'Event History', 'Identities'])
  return (
    <Pane height={120}>
      <Tablist marginBottom={16} flexBasis={240} marginRight={24}>
        {tabs.map((tab, index) => (
          <Tab
            aria-controls={`panel-${tab}`}
            isSelected={index === selectedIndex}
            key={tab}
            onSelect={() => setSelectedIndex(index)}
          >
            {tab}
          </Tab>
        ))}
      </Tablist>
      <Pane padding={16} background="tint1" flex="1">
        {tabs.map((tab, index) => (
          <Pane
            aria-labelledby={tab}
            aria-hidden={index !== selectedIndex}
            display={index === selectedIndex ? 'block' : 'none'}
            key={tab}
            role="tabpanel"
          >
            <Paragraph>Panel {tab}</Paragraph>
          </Pane>
        ))}
      </Pane>
    </Pane>
  )
}

Tab Link usage

If you are using a link (a tag), make sure to wrap your tabs in a TabNavigation component.

jsx
function TabLinkExample() {
  const tabs = React.useMemo(() => ['Traits', 'Event History', 'Identities'], [])
  // State is only used here for demo purposes, your routing abstraction might support hash links
  const [selectedIndex, setSelectedIndex] = React.useState(0)

  return (
    <TabNavigation>
      {tabs.map((tab, index) => {
        const id = tab.toLowerCase().replace(' ', '-')
        const hash = `#${id}`
        return (
          <Tab
            href={hash}
            is="a"
            isSelected={selectedIndex === index}
            key={tab}
            onClick={() => setSelectedIndex(index)}
          >
            {tab}
          </Tab>
        )
      })}
    </TabNavigation>
  )
}

Sidebar Tabs

Tabs can be rendered in a vertical direction for use in a sidebar.

jsx
function SidebarTabsExample() {
  const [selectedIndex, setSelectedIndex] = React.useState(0)
  const tabs = React.useMemo(() => ['Traits', 'Event History', 'Identities'], [])

  return (
    <Pane display="flex" height={240}>
      <Tablist marginBottom={16} flexBasis={240} marginRight={24}>
        {tabs.map((tab, index) => {
          return (
            <Tab
              aria-controls={`panel-${tab}`}
              direction="vertical"
              isSelected={index === selectedIndex}
              key={tab}
              onSelect={() => setSelectedIndex(index)}
            >
              {tab}
            </Tab>
          )
        })}
      </Tablist>
      <Pane padding={16} background="tint1" flex="1">
        {tabs.map((tab, index) => (
          <Pane
            aria-labelledby={tab}
            aria-hidden={index !== selectedIndex}
            display={index === selectedIndex ? 'block' : 'none'}
            key={tab}
            role="tabpanel"
          >
            <Paragraph>Panel {tab}</Paragraph>
          </Pane>
        ))}
      </Pane>
    </Pane>
  )
}