Tab

Some features from this component may require sgds.js

Overview

Tabs are navigation elements that let users navigate between related content that are grouped together.

Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eos fugiat in incidunt mollitia quam qui totam vel veritatis vero.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eos fugiat in incidunt mollitia quam qui totam vel veritatis vero.
Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti deserunt enim illo impedit libero, temporibus veritatis. Deserunt, fugit quasi! Voluptates!

Tab 3 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aspernatur beatae, dolores ea eum illo quasi reprehenderit sequi vero?


Code

For Tab Selectors

<div class="sgds-tabs">
    <ul class="no-margin" role="tablist">
        <li class="is-active">
            <a data-tab="#tab1" role="tab" aria-selected="true" aria-controls="tab1">
                <i class="sgds-icon sgds-icon-place padding--right--sm"></i>
                Tab 1
            </a>
        </li>
        <li>
            <a data-tab="#tab2" role="tab" aria-selected="false" aria-controls="tab2">
                <i class="sgds-icon sgds-icon-boat padding--right--sm"></i>Tab 2
            </a>
        </li>
        <li>
            <a data-tab="#tab3" role="tab" aria-selected="false" aria-controls="tab3">
                <i class="sgds-icon sgds-icon-map padding--right--sm"></i>Tab 3
            </a>
        </li>
    </ul>
</div>

For Tab Content

<div class="row" id="tab1">
    <div class="col">
        <p>Tab content 1</p>
    </div>
</div>
<div class="row" id="tab2">
    <div class="col">
        <p>Tab content 2</p>
    </div>
</div>
<div class="row" id="tab3">
    <div class="col">
        <p>Tab content 3</p>
    </div>
</div>

When you should use this component

Tabs should be used to expose related but separate content, such as sub-pages or different content under the same category.

When you should consider something else

Tabs hide information from the user. If you have a lot of information contained within tabs, do consider reducing the content. You may want to consider splitting your content into different sections using properly formatted text instead.

Tabs should be used sparingly to reduce cognitive load for the user. Having too many tabs may also affect the performace of the page which could result in longer loading times.

If you need users to make comparisons or present tabular data, using the table component may be more appropriate.


Styles

Modifier Description
is-boxed Use when you want a border
is-toggle Use when you want to have toggle buttons
is-centered Use when you want position your toggle buttons at the center
is-small
is-medium
is-large
Use when you want to change the size of your tabs

Examples

Boxed

<div class="sgds-tabs is-boxed">...</div>

Toggle

<div class="sgds-tabs is-toggle">...</div>

Centered

<div class="sgds-tabs is-centered">...</div>

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team