Tabs (content)
Allows users to navigate between related sections of content within a page.
Examples
Tabs allow users to navigate between related sections of content on the same page, displaying one section at a time.
Tabs can be a helpful way of letting users switch quickly between related information if:
- your content can be separated into clearly labelled sections
- the first section is more relevant than the others
- users will not need to view all the sections at once
Usage
Do:
- use tabs to alternate between views within the same context, not to navigate to different areas
- logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab
- write short tab labels usually be 1 to 2 words as they are more scannable
- stick to only one row of tabs. Multiple rows can become excessively complex; if you need more tabs than will fit in a single row, you should simplify your design
- arrange tab labels in an order that makes sense for your users
- consider 'grouping' related tabs
- test your content without tabs first, and consider if it's better to simplify and reduce the amount of content, or split the content across multiple pages
Avoid:
- using tabs if the amount of content the different tabs contain will make the page slow to load
- using tabs to navigate to different pages
- using tabs when users need to see or compare content from multiple tabs at the same time
- using tabs if your users might need to read through all the content in order, for example, to understand a step-by-step process
- using all capitals for tab labels as this is harder to read
- creating nested tabs, that is tabs inside of tabs
When to use tabs
- you should also consider the number of sections of content, tabs are arranged horizontally, so cannot fit as many sections as accordions, which display vertically
- accordions push other sections down the page when they open, but tabs do not move which makes it easier to switch between content
- tabs may work better for users who need to switch quickly between 2 sections
- tabs hide sections of content that a user can choose to reveal
Tabs (content) reveal various sections within the content page, enabling users to switch between them. If you prefer to change the entire content of page when a user switches tabs, you may want to explore the component Tabs (page).
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Responsive tabs
First panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Second panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Third panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Fourth panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
<turas-tabs tabs-id="tabsExample">
<turas-tab tab-id="tabsExample-1" tab-active tab-title="Tab title 1">
<p><strong>First panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
<turas-tab tab-id="tabsExample-2" tab-title="Tab title 2">
<p><strong>Second panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
<turas-tab tab-id="tabsExample-3" tab-title="Tab title 3">
<p><strong>Third panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
<turas-tab tab-id="tabsExample-4" tab-title="Tab title 4">
<p><strong>Fourth panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
</turas-tabs>
<div class="tabs-stacked-mobile "><ul id="tabsExample" class="nav nav-tabs d-none d-lg-flex" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active " id="tabsExample-1" data-bs-toggle="tab" data-bs-target="#tabsExample-1-pane" type="button" role="tab" aria-controls="tabsExample-1-pane" aria-selected="true">Tab title 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="tabsExample-2" data-bs-toggle="tab" data-bs-target="#tabsExample-2-pane" type="button" role="tab" aria-controls="tabsExample-2-pane" aria-selected="false">Tab title 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="tabsExample-3" data-bs-toggle="tab" data-bs-target="#tabsExample-3-pane" type="button" role="tab" aria-controls="tabsExample-3-pane" aria-selected="false">Tab title 3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="tabsExample-4" data-bs-toggle="tab" data-bs-target="#tabsExample-4-pane" type="button" role="tab" aria-controls="tabsExample-4-pane" aria-selected="false">Tab title 4</button>
</li>
</ul>
<div class="tab-content accordion" id="tabsExampleContent">
<div class="tab-pane fade show active accordion-item" id="tabsExample-1-pane" role="tabpanel" aria-labelledby="tabsExample-1" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExample-1">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExample-1" aria-expanded="true" aria-controls="collapsetabsExample-1">
Tab title 1
</button>
</div>
<div id="collapsetabsExample-1" class="accordion-collapse collapse show d-lg-block" aria-labelledby="headingtabsExample-1" data-bs-parent="#tabsExampleContent">
<div class="accordion-body">
<p><strong>First panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div class="tab-pane fade accordion-item" id="tabsExample-2-pane" role="tabpanel" aria-labelledby="tabsExample-2" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExample-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExample-2" aria-expanded="false" aria-controls="collapsetabsExample-2">
Tab title 2
</button>
</div>
<div id="collapsetabsExample-2" class="accordion-collapse collapse d-lg-block" aria-labelledby="headingtabsExample-2" data-bs-parent="#tabsExampleContent">
<div class="accordion-body">
<p><strong>Second panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div class="tab-pane fade accordion-item" id="tabsExample-3-pane" role="tabpanel" aria-labelledby="tabsExample-3" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExample-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExample-3" aria-expanded="false" aria-controls="collapsetabsExample-3">
Tab title 3
</button>
</div>
<div id="collapsetabsExample-3" class="accordion-collapse collapse d-lg-block" aria-labelledby="headingtabsExample-3" data-bs-parent="#tabsExampleContent">
<div class="accordion-body">
<p><strong>Third panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div class="tab-pane fade accordion-item" id="tabsExample-4-pane" role="tabpanel" aria-labelledby="tabsExample-4" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExample-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExample-4" aria-expanded="false" aria-controls="collapsetabsExample-4">
Tab title 4
</button>
</div>
<div id="collapsetabsExample-4" class="accordion-collapse collapse d-lg-block" aria-labelledby="headingtabsExample-4" data-bs-parent="#tabsExampleContent">
<div class="accordion-body">
<p><strong>Fourth panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
</div>
</div>
Responsive tabs inside card
First panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Second panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Third panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Fourth panel content
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
<turas-tabs tabs-id="tabsExampleInCard">
<turas-tab tab-id="tabsExampleInCard-1" tab-active tab-title="Tab title 1">
<p><strong>First panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
<turas-tab tab-id="tabsExampleInCard-2" tab-title="Tab title 2">
<p><strong>Second panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
<turas-tab tab-id="tabsExampleInCard-3" tab-title="Tab title 3">
<p><strong>Third panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
<turas-tab tab-id="tabsExampleInCard-4" tab-title="Tab title 4">
<p><strong>Fourth panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab>
</turas-tabs>
<div class="tabs-stacked-mobile "><ul id="tabsExampleInCard" class="nav nav-tabs d-none d-lg-flex" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active " id="tabsExampleInCard-1" data-bs-toggle="tab" data-bs-target="#tabsExampleInCard-1-pane" type="button" role="tab" aria-controls="tabsExampleInCard-1-pane" aria-selected="true">Tab title 1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="tabsExampleInCard-2" data-bs-toggle="tab" data-bs-target="#tabsExampleInCard-2-pane" type="button" role="tab" aria-controls="tabsExampleInCard-2-pane" aria-selected="false">Tab title 2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="tabsExampleInCard-3" data-bs-toggle="tab" data-bs-target="#tabsExampleInCard-3-pane" type="button" role="tab" aria-controls="tabsExampleInCard-3-pane" aria-selected="false">Tab title 3</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="tabsExampleInCard-4" data-bs-toggle="tab" data-bs-target="#tabsExampleInCard-4-pane" type="button" role="tab" aria-controls="tabsExampleInCard-4-pane" aria-selected="false">Tab title 4</button>
</li>
</ul>
<div class="tab-content accordion" id="tabsExampleInCardContent">
<div class="tab-pane fade show active accordion-item" id="tabsExampleInCard-1-pane" role="tabpanel" aria-labelledby="tabsExampleInCard-1" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExampleInCard-1">
<button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExampleInCard-1" aria-expanded="true" aria-controls="collapsetabsExampleInCard-1">
Tab title 1
</button>
</div>
<div id="collapsetabsExampleInCard-1" class="accordion-collapse collapse show d-lg-block" aria-labelledby="headingtabsExampleInCard-1" data-bs-parent="#tabsExampleInCardContent">
<div class="accordion-body">
<p><strong>First panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div class="tab-pane fade accordion-item" id="tabsExampleInCard-2-pane" role="tabpanel" aria-labelledby="tabsExampleInCard-2" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExampleInCard-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExampleInCard-2" aria-expanded="false" aria-controls="collapsetabsExampleInCard-2">
Tab title 2
</button>
</div>
<div id="collapsetabsExampleInCard-2" class="accordion-collapse collapse d-lg-block" aria-labelledby="headingtabsExampleInCard-2" data-bs-parent="#tabsExampleInCardContent">
<div class="accordion-body">
<p><strong>Second panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div class="tab-pane fade accordion-item" id="tabsExampleInCard-3-pane" role="tabpanel" aria-labelledby="tabsExampleInCard-3" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExampleInCard-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExampleInCard-3" aria-expanded="false" aria-controls="collapsetabsExampleInCard-3">
Tab title 3
</button>
</div>
<div id="collapsetabsExampleInCard-3" class="accordion-collapse collapse d-lg-block" aria-labelledby="headingtabsExampleInCard-3" data-bs-parent="#tabsExampleInCardContent">
<div class="accordion-body">
<p><strong>Third panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div class="tab-pane fade accordion-item" id="tabsExampleInCard-4-pane" role="tabpanel" aria-labelledby="tabsExampleInCard-4" tabindex="0">
<div class="accordion-header d-lg-none" id="headingtabsExampleInCard-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsetabsExampleInCard-4" aria-expanded="false" aria-controls="collapsetabsExampleInCard-4">
Tab title 4
</button>
</div>
<div id="collapsetabsExampleInCard-4" class="accordion-collapse collapse d-lg-block" aria-labelledby="headingtabsExampleInCard-4" data-bs-parent="#tabsExampleInCardContent">
<div class="accordion-body">
<p><strong>Fourth panel content</strong></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
</div>
</div>
Required parameters
- tabs-id - the unique ID of the tabs
- tab-id - the unique ID of a tab item
- tab-active - set this to 'true' on the inital active tab
Optional parameters
- tab-title - the tab item title
- tab-disabled - set to 'true' to disable a tab
- additional-classes - additional CSS classes
- id - the HTML ID attribute
Accessibility status
This component is partially compliant with the WCAG 2.2 standard because of the following non compliances:
- the content inside the tabs are not accessible via a keyboard on mobile view
- the content inside the tabs are not announced by screen readers
Testing
- check keyboard navigation to ensure the tab is in expected tab order and doesn't cause a keyboard trap
- check that you can navigate through the tabs with the arrow keys and that the return and enter keys allow you to access the content within the selected tab
- test tabs with screen readers to ensure labels and functionality are announced as expected
