Tab

Tab is a navigation element used in web design that allow users to easily access different areas of a site or different parts of an individual page. They're sort of like tabbed dividers in a filing cabinet – by clicking a tab, users can easily locate a page containing related content

Tab content 1

Tab content 2

Tab content 3


Usage

<div class="sgds-tabs" data-sgds="tabs">
    <ul>
        <li class="is-active"><a data-tab="#tab1">Tab 1</a></li>
        <li><a data-tab="#tab2">Tab 2</a></li>
        <li><a data-tab="#tab3">Tab 3</a></li>
    </ul>
</div>
<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>

Guidelines

Tab should:

  • Be clearly labeled to help differentiate the sections beneath them
  • Have short labels, try to keep to single word
  • Have only one active at a time
  • Not be used for primary navigation

Style

Modifier Description
is-boxed Use when you want a border
is-toggle Use when you want to have toggle buttons

Feedback

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

Tell us more