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