Tabs

Tabs is a component that makes navigating between sections of related content possible, displaying one section at a time.

Table of contents

• How to use Tabs
• Code examples
• Content recommendations

How to use Tabs

Use Tabs if the content can be separated into sections that make sense as standalone pieces of information. Be aware that the users will not see all the content at the same time. Make sure the first section is the most relevant one.

Code examples

<Tabs role="tablist" withDivider>
  <Tab id="first" href="https://contentful.com" selected>
    First
  </Tab>
  <Tab id="second" href="https://contentful.com">
    Second
  </Tab>
  <Tab id="third" href="https://contentful.com">
    Third
  </Tab>
</Tabs>
<Tabs role="tablist" withDivider>
  <Tab id="first" href="https://contentful.com" selected>
    First
  </Tab>
  <Tab id="second" href="https://contentful.com">
    Second
  </Tab>
  <Tab id="third" href="https://contentful.com">
    Third
  </Tab>
</Tabs>
Hide source

with vertical divider

<Tabs role="tablist" withDivider dividerOrientation="vertical">
  <Tab id="first" href="https://contentful.com" selected>
    First
  </Tab>
  <Tab id="second" href="https://contentful.com">
    Second
  </Tab>
  <Tab id="third" href="https://contentful.com">
    Third
  </Tab>
</Tabs>
<Tabs role="tablist" withDivider dividerOrientation="vertical">
  <Tab id="first" href="https://contentful.com" selected>
    First
  </Tab>
  <Tab id="second" href="https://contentful.com">
    Second
  </Tab>
  <Tab id="third" href="https://contentful.com">
    Third
  </Tab>
</Tabs>
Hide source

as navigation

<Tabs role="navigation">
  <Tab id="first" href="https://contentful.com" selected>
    First
  </Tab>
  <Tab id="second" href="https://contentful.com">
    Second
  </Tab>
  <Tab id="third" href="https://contentful.com">
    Third
  </Tab>
</Tabs>
<Tabs role="navigation">
  <Tab id="first" href="https://contentful.com" selected>
    First
  </Tab>
  <Tab id="second" href="https://contentful.com">
    Second
  </Tab>
  <Tab id="third" href="https://contentful.com">
    Third
  </Tab>
</Tabs>
Hide source

used with TabPanel

<>
  <Tabs role="tablist">
    <Tab id="first" selected={selected === 'first'}>
      First
    </Tab>
    <Tab id="second" selected={selected === 'second'}>
      Second
    </Tab>
  </Tabs>
  {selected === 'first' && (
    <TabPanel id="first">Content for the first tab</TabPanel>
  )}
  {selected === 'second' && (
    <TabPanel id="second">Content for the second tab</TabPanel>
  )}
</>
<>
  <Tabs role="tablist">
    <Tab id="first" selected={selected === 'first'}>
      First
    </Tab>
    <Tab id="second" selected={selected === 'second'}>
      Second
    </Tab>
  </Tabs>
  {selected === 'first' && (
    <TabPanel id="first">Content for the first tab</TabPanel>
  )}
  {selected === 'second' && (
    <TabPanel id="second">Content for the second tab</TabPanel>
  )}
</>
Hide source

Content recommendations

• every Tab should have concise copy
• all content within a Tab should be related to it's label
• to ensure an optimal cognitive load for users, do not use more than six (6) Tabs at any given time