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>