Tabs

When to use it

The Tabs component is used to create tabbed navigation interfaces. It supports both ordered and unordered lists of links or just a series of link elements with a wrapper element.

Variants

• Filled Tabs: Use the .c-tabs__tab--filled modifier to create tabs with a filled background.
• Large Tabs: Use the .c-tabs__tab--large modifier to increase the font size of the tabs.

What it looks like

Code examples

Default

<div class="c-tabs">
    <a href="#tab1" class="c-tabs__tab">Not selected</a>
    <a href="#tab2" class="c-tabs__tab c-tabs__tab--selected">Selected</a>
    <a href="#tab3" class="c-tabs__tab">Not selected</a>
    <a href="#tab4" class="c-tabs__tab">Not selected</a>
</div>

Data Tabs

<div class="o-grid">
    <div class="o-grid__col-12">
        <div class="c-tabs" data-tabs>
            <a href="#tab1" class="c-tabs__tab c-tabs__tab--selected">Tab 1</a>
            <a href="#tab2" class="c-tabs__tab">Tab 2</a>
            <a href="#tab3" class="c-tabs__tab">Tab 3</a>
        </div>
    </div>
    <div class="o-grid__col-auto" id="tab1">
        <p class="c-box"><strong>Tab panel one.</strong></p>
    </div>
    <div class="o-grid__col-auto" id="tab2">
        <p class="c-box"><strong>Tab panel two.</strong></p>
    </div>
    <div class="o-grid__col-auto" id="tab3">
        <p class="c-box"><strong>Tab panel three.</strong></p>
    </div>
</div>

Filled Tabs

<div class="c-tabs">
    <a href="#tab1" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
    <a href="#tab2" class="c-tabs__tab c-tabs__tab--filled c-tabs__tab--selected">Selected</a>
    <a href="#tab3" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
    <a href="#tab4" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
</div>

Accessibility notes

If the data-tabs attribute is present and the tabs’ href attributes lead to existing ids on the same page, the accessible tabs functionality is created automatically to show/hide them (see components.tabs.js). If you're making your own JS implementation of the same feature, try to follow these guidelines:

1. Keyboard Navigation: Users should be able to navigate through tabs using the keyboard. Use tabindex to manage focus.
2. ARIA Roles: Use appropriate ARIA roles such as role="tablist", role="tab", and role="tabpanel".
3. ARIA Attributes: Use aria-selected and aria-labelledby to link tabs with their corresponding panels.
4. Focus Management: Ensure that the active tab is focusable and that focus is managed correctly when tabs are switched.