SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Some features from this component may require sgds.js

Overview

Tabs organize content across different screens, data sets, and other interactions.

Interactive Demo

This demo lets you preview the tab component and its variations. Each tab displays a different type of tab.

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?


Usage

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>

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>

When to use

Tabs should be used for:
  • Exposing related but separate content.
    • For example, subpages or different content under the same category.
Tabs should not be used for:
  • Containing excessive information.
    • You should consider reducing the content.
    • Alternatively, you can consider splitting your content into different sections using properly formatted text.
  • Making comparisons or presenting tabular data.
    • Using the table component may be more appropriate.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component