Component

Tabs (experimental)

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

This component is based on the GOV.UK Design System tabs component and is currently experimental. If using this component, please feed back any research findings to the GOV.UK 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) (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>
    "),
      tab_data_attributes: {
        ga4_event: {
          event_name: "select_content",
          type: "tabs",
          text: "First section",
          index_section: 1,
          index_section_count: 2
        }
      }
    },
    {
      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>
    "),
      tab_data_attributes: {
        ga4_event: {
          event_name: "select_content",
          type: "tabs",
          text: "Second section",
          index_section: 2,
          index_section_count: 2
        }
      }
    }
  ]
} %>

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

• id - accepts a string for the element ID attribute
• data_attributes - accepts a hash of data attributes
• aria - accepts a hash of aria attributes
• classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
• role - accepts a space separated string of roles
• lang - accepts a language attribute value
• open - accepts an open attribute value (true or false)
• hidden - accepts an empty string, ‘hidden’, or ‘until-found’
• tabindex - accepts an integer. The integer can also be passed as a string.
• dir - accepts ‘rtl’, ‘ltr’, or ‘auto’.

As links (preview)

With this option the tabs operate as links, rather than switching between elements within a single page.

Contents

• Page one
• Page two

<%= render "govuk_publishing_components/components/tabs", {
  as_links: true,
  tabs: [
    {
      href: "link1",
      label: "Page one",
      active: true
    },
    {
      href: "link2",
      label: "Page two",
      active: false
    }
  ]
} %>

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)

The example shown applies a tracking attribute specifically for use by Google Tag Manager in Content Publisher.

Other data attributes can also be applied as required. Note that the component does not include built in tracking. If this is required consider using the GA4 link tracker.

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>
    ")
    }
  ]
} %>

Without ga4 tracking on tabs (preview)

Disables GA4 tracking on tabs. Tracking is enabled by default. This includes the event tracker and required data attributes. See the ga4-event-tracker documentation for more information.

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", {
  disable_ga4: true,
  tabs: [
    {
      id: "tab-with-ga4-tracking-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-ga4-tracking-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>
    ")
    }
  ]
} %>

Without ga4 tracking on tabs as links (preview)

Disables GA4 tracking on tabs as links. Tracking is enabled by default.

Contents

• Link 1
• Link 2

<%= render "govuk_publishing_components/components/tabs", {
  as_links: true,
  disable_ga4: true,
  tabs: [
    {
      href: "/page1",
      label: "Link 1",
      active: true
    },
    {
      href: "/page2",
      label: "Link 2",
      active: false
    }
  ]
} %>