Tabs (content)

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).

Tab title 1

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 3

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Responsive tabs

Tab title 1

First panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 2

Second panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 3

Third panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 4

Fourth panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Copy


    <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>

Copy


    <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

Tab title 1

First panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 2

Second panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 3

Third panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Tab title 4

Fourth panel content

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.

Copy


            <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>

Copy


            <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

Developer considerations

Tables

Tabs (page)

Examples

Usage

When to use tabs

Responsive tabs

Responsive tabs inside card

Required parameters

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?