1. Government Frontend Component Guide
  2. Tabs (experimental)

Component

Tabs (experimental)

The tabs component lets users toggle between related sections of content.

This component is based on the design system tabs component and is currently experimental. If using this component, please feed back any research findings to the Design System team.

The tabs component lets users navigate between related sections of content on a single page, displaying one section at a time. Note that they are not intended to be used to navigate between different pages.

The content block MUST be passed as a block to avoid the risk of unsanitised HTML.

Search for usage of this component on GitHub

How it looks (preview all)

Contents

Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.

How to call this component

<%= render "govuk_publishing_components/components/tabs", {
  tabs: [
    {
      id: "tab1",
      label: "First section",
      content: sanitize("<p class=\"govuk-body-m\">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
    ")
    },
    {
      id: "tab2",
      label: "Second section",
      content: sanitize("<p class=\"govuk-body-m\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
    ")
    }
  ]
} %>

Accessibility acceptance criteria

  • Tabs must:
    • accept focus
    • be usable with a keyboard
    • indicate when they have focus
    • be usable with touch
    • be usable with voice commands
    • have visible text

Other examples

Without panel border (preview)

Contents

Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.

<%= render "govuk_publishing_components/components/tabs", {
  panel_border: false,
  tabs: [
    {
      id: "tab-no-border-1",
      label: "First section",
      content: sanitize("<p class=\"govuk-body-m\">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
    ")
    },
    {
      id: "tab-no-border-2",
      label: "Second section",
      content: sanitize("<p class=\"govuk-body-m\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
    ")
    }
  ]
} %>

With title (preview)

Contents

First section

Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.

Second section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.

<%= render "govuk_publishing_components/components/tabs", {
  tabs: [
    {
      id: "tab-with-title-1",
      label: "First section",
      title: "First section",
      content: sanitize("<p class=\"govuk-body-m\">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
    ")
    },
    {
      id: "tab-with-title-2",
      label: "Second section",
      title: "Second section",
      content: sanitize("<p class=\"govuk-body-m\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
    ")
    }
  ]
} %>

Single item (preview)

If only an individual item is supplied to the component (if the list is created dynamically, for example) it will be rendered without tabs.

Here is a single piece of content, there should be no tabs.

<%= render "govuk_publishing_components/components/tabs", {
  tabs: [
    {
      id: "singletab",
      label: "Single piece of content",
      content: sanitize("<p class=\"govuk-body-m\">Here is a single piece of content, there should be no tabs.</p>
    ")
    }
  ]
} %>

With data attributes (preview)

Contents

First section

Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.

Second section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.

<%= render "govuk_publishing_components/components/tabs", {
  tabs: [
    {
      id: "tab-with-data-attributes-1",
      label: "First section",
      title: "First section",
      tab_data_attributes: {
        tracking: "GTM-123AB"
      },
      content: sanitize("<p class=\"govuk-body-m\">Fusce at dictum tellus, ac accumsan est. Nulla vitae turpis in nulla gravida tincidunt. Duis lectus felis, tempus id bibendum sit amet, posuere ut elit. Donec enim odio, eleifend in urna a, sagittis egestas est. Proin id ex ultricies, porta eros id, vehicula quam. Morbi non sagittis velit.</p>
    ")
    },
    {
      id: "tab-with-data-attributes-2",
      label: "Second section",
      title: "Second section",
      tab_data_attributes: {
        tracking: "GTM-123AB"
      },
      content: sanitize("<p class=\"govuk-body-m\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue elementum commodo. Vestibulum elit turpis, efficitur quis posuere vitae, commodo vitae augue. Donec ut pharetra ligula. Phasellus ac mauris eu felis bibendum dapibus rutrum sed quam. Pellentesque posuere ante id consequat pretium.</p>
    ")
    }
  ]
} %>