Tabs

Standard

Default

A default set of tabs lets users quickly switch between related information.

Contents

Past day

There were 3 cases opened and 0 cases closed in the past day.

Past week

There were 24 cases opened and 18 cases closed in the past week.

Show code

<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">Contents</h2>
  <ul class="govuk-tabs__list">
    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#tab-1">Past day</a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#tab-2">Past week</a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="tab-1">
    <h2 class="govuk-heading-m">Past day</h2>
    <p class="govuk-body">
      There were 3 cases opened and 0 cases closed in the past day.
    </p>
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tab-2">
    <h2 class="govuk-heading-m">Past week</h2>
    <p class="govuk-body">
      There were 24 cases opened and 18 cases closed in the past week.
    </p>
  </div>
</div>

---
import { Tabs, TabsTitle, TabsList, Tab, TabPanel } from "@i-dot-ai-npm/component-library-astro";
---

<Tabs>
  <TabsTitle>Contents</TabsTitle>
  <TabsList>
    <Tab href="#tab-1" selected>Past day</Tab>
    <Tab href="#tab-2">Past week</Tab>
  </TabsList>
  <TabPanel id="tab-1">
    <h2 class="govuk-heading-m">Past day</h2>
    <p class="govuk-body">
      There were 3 cases opened and 0 cases closed in the past day.
    </p>
  </TabPanel>
  <TabPanel id="tab-2" hidden>
    <h2 class="govuk-heading-m">Past week</h2>
    <p class="govuk-body">
      There were 24 cases opened and 18 cases closed in the past week.
    </p>
  </TabPanel>
</Tabs>

import { Tabs, TabsTitle, TabsList, Tab, TabPanel } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tabs>
      <TabsTitle>Contents</TabsTitle>
      <TabsList>
        <Tab href="#tab-1" selected>Past day</Tab>
        <Tab href="#tab-2">Past week</Tab>
      </TabsList>
      <TabPanel id="tab-1">
        <h2 className="govuk-heading-m">Past day</h2>
        <p className="govuk-body">
          There were 3 cases opened and 0 cases closed in the past day.
        </p>
      </TabPanel>
      <TabPanel id="tab-2" hidden>
        <h2 className="govuk-heading-m">Past week</h2>
        <p className="govuk-body">
          There were 24 cases opened and 18 cases closed in the past week.
        </p>
      </TabPanel>
    </Tabs>
  );
}

<script>
  import { Tabs, TabsTitle, TabsList, Tab, TabPanel } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tabs>
  <TabsTitle>Contents</TabsTitle>
  <TabsList>
    <Tab href="#tab-1" selected>Past day</Tab>
    <Tab href="#tab-2">Past week</Tab>
  </TabsList>
  <TabPanel id="tab-1">
    <h2 class="govuk-heading-m">Past day</h2>
    <p class="govuk-body">
      There were 3 cases opened and 0 cases closed in the past day.
    </p>
  </TabPanel>
  <TabPanel id="tab-2" hidden>
    <h2 class="govuk-heading-m">Past week</h2>
    <p class="govuk-body">
      There were 24 cases opened and 18 cases closed in the past week.
    </p>
  </TabPanel>
</Tabs>

import { Tabs, TabsTitle, TabsList, Tab, TabPanel } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tabs>
      <TabsTitle>Contents</TabsTitle>
      <TabsList>
        <Tab href="#tab-1" selected>Past day</Tab>
        <Tab href="#tab-2">Past week</Tab>
      </TabsList>
      <TabPanel id="tab-1">
        <h2 class="govuk-heading-m">Past day</h2>
        <p class="govuk-body">
          There were 3 cases opened and 0 cases closed in the past day.
        </p>
      </TabPanel>
      <TabPanel id="tab-2" hidden>
        <h2 class="govuk-heading-m">Past week</h2>
        <p class="govuk-body">
          There were 24 cases opened and 18 cases closed in the past week.
        </p>
      </TabPanel>
    </Tabs>
  );
}

When to use this component

Tabs can be a helpful way of letting users quickly switch between related information if:

• your content can be usefully separated into clearly labelled sections
• the first section is more relevant than the others for most users
• users will not need to view all the sections at once

Tabs can work well for people who use a service regularly, for example, users of a caseworking system. Their need to perform tasks quickly may be greater than their need for simplicity of first-time use.

When not to use this component

Do not use the tabs component if the total amount of content the tabs contain will make the page slow to load. For this reason, do not use the tabs component as a form of page navigation.

Tabs hide content from users and not everyone will notice them or understand how they work.

Do not use tabs if your users might need to:

• read through all of the content in order, for example, to understand a step-by-step process
• compare information in different tabs - having to memorise the information and switch backwards and forwards can be frustrating and difficult

Test your content without tabs first. Consider if it’s better to:

• simplify and reduce the amount of content
• split the content across multiple pages
• keep the content on a single page, separated by headings
• use a table of contents to let users navigate quickly to specific sections of content