Tabs

The tabs component lets users navigate between related sections of content, displaying one section at a time.

How to use the component

The tabs component have a title, which is displayed above a list of jump links on narrow screens or if javascript is unavailable. This defaults to ‘Contents’ but can be changed if needed.

Each tab requires a label which will form the link at the top.

The content can be set by using either a block of HTML, or the text argument.

Input

= govuk_tabs do |tabs|
  - tabs.with_tab(label: "Text", text: "This was set using a text argument")
  - tabs.with_tab(label: "Inline block") { "This was set using an inline block of content" }
  - tabs.with_tab(label: "Regular block") do
    p This was set using a block of HTML.
    p Use this style if you need complex markup within your tab.

<%= govuk_tabs do |tabs|
tabs.with_tab(label: "Text", text: "This was set using a text argument")
tabs.with_tab(label: "Inline block") { "This was set using an inline block of content" }
tabs.with_tab(label: "Regular block") do %>
  <p>This was set using a block of HTML.</p>
  <p>Use this style if you need complex markup within your tab.</p>
<% end; end %>

Rendered output

Contents

This was set using a text argument

This was set using an inline block of content

This was set using a block of HTML.

Use this style if you need complex markup within your tab.

HTML output

<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="#text">
        Text
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#inline-block">
        Inline block
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#regular-block">
        Regular block
      </a>
    </li>
  </ul>
  <div id="text" class="govuk-tabs__panel">
    This was set using a text argument
  </div>
  <div id="inline-block" class="govuk-tabs__panel govuk-tabs__panel--hidden">
    This was set using an inline block of content
  </div>
  <div id="regular-block" class="govuk-tabs__panel govuk-tabs__panel--hidden">
    <p>
      This was set using a block of HTML.
    </p>
    <p>
      Use this style if you need complex markup within your tab.
    </p>
  </div>
</div>