Tabs (page)
Page tabs allow users to navigate between views on the same page.
Examples
Page tabs provide a convenient way for users to navigate between various sections or views within a single page without the need to reload the entire page.
Usage
Page tabs can be a helpful way of letting users switch quickly between related information if:
- content of page tabs does not need a new page
- the first section is more relevant than the others
- users will not need to view all the sections at once
Do:
- use tabs to alternate between larger views within the same context
Avoid:
- using page tabs for primary navigation; if tabs become too complex, consider using a standard navigation
- use no more than 3 to 5 tabs if more is needed take consideration if this is the best component to use
- using to indicate progress
- using to compare information in two sections, otherwise, user would need to click back and forth to complete a task
When to use tabs
Tabs (page) display the complete content of an entire page, allowing the user to switch between sections of that page. If your goal is to display tabs within the content, you might use the component Tabs (content).
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.
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.
<turas-tabs-page tabs-id="tabsExample">
<turas-tab-page tab-id="tabsExample-1" tab-active tab-title="Tab title 1">
<p><strong>First panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab-page>
<turas-tab-page tab-id="tabsExample-2" tab-title="Tab title 2">
<p><strong>Second panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab-page>
<turas-tab-page tab-id="tabsExample-3" tab-title="Tab title 3">
<p><strong>Third panel content</strong></p>
<turas-lorem></turas-lorem>
</turas-tab-page>
</turas-tabs-page>
<nav>
<div class="nav nav-components" id="tabsExample" role="tablist">
<button class="nav-link active " id="tabsExample-1-tab" data-bs-toggle="tab" data-bs-target="#tabsExample-1" type="button" role="tab" aria-controls="tabsExample-1" aria-selected="true">Tab title 1</button>
<button class="nav-link " id="tabsExample-2-tab" data-bs-toggle="tab" data-bs-target="#tabsExample-2" type="button" role="tab" aria-controls="tabsExample-2" aria-selected="false">Tab title 2</button>
<button class="nav-link " id="tabsExample-3-tab" data-bs-toggle="tab" data-bs-target="#tabsExample-3" type="button" role="tab" aria-controls="tabsExample-3" aria-selected="false">Tab title 3</button>
</div>
</nav>
<div class="tab-content tab-components" id="tabsExample-tabContent">
<div class="tab-pane tab fade show active accordion-item" id="tabsExample-1" role="tabpanel" aria-labelledby="tabsExample-1">
<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 class="tab-pane tab fade accordion-item" id="tabsExample-2" role="tabpanel" aria-labelledby="tabsExample-2">
<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 class="tab-pane tab fade accordion-item" id="tabsExample-3" role="tabpanel" aria-labelledby="tabsExample-3">
<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>
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
