Tab

Some features from this component may require sgds.js

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?


Component 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

The tab component can help users in switching between related information and users don't need to view all information at once.

When you should consider something else

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

Tabs should be used sparingly, this is 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 compare information, using the table component would 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
Feedback

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

Chat with the team