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

Developer considerations

Previous

Tabs (content)

Suggest a new component

Can't find the component you're looking for? Contact us to discuss adding a new one.

Build accessible experiences

Prioritise accessibility. Audit your products and understand your legal obligations.

Research user journeys

Conduct research to assess the overall usability of your product when using these components.

Was this page helpful?