Tabs

How to use tabs

Tabs are a useful way of letting users quickly switch between related information. They help by hiding sections of content which the user can choose to reveal.

When using tabs:

Only one option can be selected at a time
Once an option is selected, the results should display immediately
The first tab should be the most relevant to users
They should only be used for related information
Users should be able to complete tasks under each tab without having to jump back and forth between tabs

Types of tabs

Standard

Interactive demo - Sainsbury's

() => {
  const tabs = [
    { name: "Fruit & Veg", key: "fruit" },
    { name: "Meat & Fish", key: "meat" },
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]

  const [activeTab, setActiveTab] = React.useState("fruit")

  return (
    <div>
      <Tabs>
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

() => {
  const tabs = [
    { name: "Fruit & Veg", key: "fruit" },
    { name: "Meat & Fish", key: "meat" },
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]

  const [activeTab, setActiveTab] = React.useState("fruit")

  return (
    <div>
      <Tabs>
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

Deep

Interactive demo - Sainsbury's

() => {
  const tabs = [
    { name: "Fruit & Veg", key: "fruit" },
    { name: "Meat & Fish", key: "meat" },
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]
  const [activeTab, setActiveTab] = React.useState("fruit")

  return (
    <div>
      <Tabs type="deep">
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

() => {
  const tabs = [
    { name: "Fruit & Veg", key: "fruit" },
    { name: "Meat & Fish", key: "meat" },
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]
  const [activeTab, setActiveTab] = React.useState("fruit")

  return (
    <div>
      <Tabs type="deep">
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

Fill

Interactive demo - Sainsbury's

() => {
  const tabs = [
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]
  const [activeTab, setActiveTab] = React.useState("dairy")

  return (
    <div>
      <Tabs type="fill">
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

() => {
  const tabs = [
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]
  const [activeTab, setActiveTab] = React.useState("dairy")

  return (
    <div>
      <Tabs type="fill">
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

Pill

Interactive demo - Sainsbury's

() => {
  const tabs = [
    { name: "Fruit & Veg", key: "fruit" },
    { name: "Meat & Fish", key: "meat" },
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]

  const [activeTab, setActiveTab] = React.useState("fruit")

  return (
    <div>
      <Tabs type="pill">
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

() => {
  const tabs = [
    { name: "Fruit & Veg", key: "fruit" },
    { name: "Meat & Fish", key: "meat" },
    { name: "Dairy", key: "dairy" },
    { name: "Chilled", key: "chilled" },
    { name: "Bakery", key: "bakery" },
  ]

  const [activeTab, setActiveTab] = React.useState("fruit")

  return (
    <div>
      <Tabs type="pill">
        {tabs.map((tab) => (
          <TabLink
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            active={activeTab === tab.key}
          >
            {tab.name}
          </TabLink>
        ))}
      </Tabs>
      <TabPanel>
        <Card>
          <h3>{tabs.find((tab) => activeTab === tab.key).name} Section</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur.
          </p>
        </Card>
      </TabPanel>
    </div>
  )
}

Copy guidelines

Be clear in your labels about what content is in each section
Start your tab labels with a capital letter
Don’t use commas or any punctuation at the end of each label
Don’t use more than two words per label

Was this page helpful?

Get in touch

Our team can answer any questions about using tabs or give you a helping hand with your next project.

Email

Microsoft Teams

Slack

On this page