Skip to main content
  1. Home
  2. Tabs

Tabs

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

Tabs with text and block content

The tabs component can contain one or more tab slots. Each tab requires a label which will form the link at the top, and the content can be set either using the text argument or via a block of HTML.

Input

= govuk_tabs(title: "Monday’s child nursery rhyme") do |c|
  - c.tab(label: "Monday", text: "Monday’s child is fair of face")
  - c.tab(label: "Tuesday", text: "Tuesday’s child is full of grace")
  - c.tab(label: "Wednesday")
    | Wednesday’s child is full of woe
<%= govuk_tabs(title: "Monday’s child nursery rhyme") do |c|
c.tab(label: "Monday", text: "Monday’s child is fair of face")
c.tab(label: "Tuesday", text: "Tuesday’s child is full of grace")
c.tab(label: "Wednesday") do %>Wednesday’s child is full of woe
<% end; end %>

Rendered output

Monday’s child nursery rhyme

Monday’s child is fair of face
Tuesday’s child is full of grace
Wednesday’s child is full of woe

HTML output

<div class="govuk-tabs" data-module="govuk-tabs">
  <h2 class="govuk-tabs__title">
    Monday’s child nursery rhyme
  </h2>
  <ul class="govuk-tabs__list">
    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
      <a class="govuk-tabs__tab" href="#monday">
        Monday
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#tuesday">
        Tuesday
      </a>
    </li>
    <li class="govuk-tabs__list-item">
      <a class="govuk-tabs__tab" href="#wednesday">
        Wednesday
      </a>
    </li>
  </ul>
  <div class="govuk-tabs__panel" id="monday">
    Monday’s child is fair of face
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="tuesday">
    Tuesday’s child is full of grace
  </div>
  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="wednesday">
    Wednesday’s child is full of woe
  </div>
</div>

Related information