Tabs

Tabs

Tabs are used to display individual views as a group within the larger application. Tabs make it possible to easily switch and explore different views.

The tabs contain a single line label that describes the content within the tab.

The currently selected tab will be highlighted in white, and bleeds into the view it contains.

When To Use

Tabs should be used to group together a set of views. They are not used for navigation. They are used to organize many pieces of content in a more focused and digestible manner. The views contained within a set of tabs are not necessarily related. Tabs within tabs are not allowed. Think of the way tabs are used within a browser, this would be comparable to opening multiple records, or applications.

Tab 1 content
<ul role="tablist" class="nav nav-tabs sn-tabs-basic">
    <li role="presentation" class="active">
        <a id="tablabel1" aria-controls="tab1" tabindex="0" role="tab" class="active" data-toggle="tab" aria-selected="true" href="#tab1">Tab 1</a>
    </li>
    <li role="presentation">
        <a id="tablabel2" aria-controls="tab2" tabindex="0" role="tab" data-toggle="tab" href="#tab2" aria-selected="false">Tab 2</a>
    </li>
    <li role="presentation">
        <a id="tablabel3" aria-controls="tab3" tabindex="0" role="tab" data-toggle="tab" href="#tab3" aria-selected="false">Tab 3</a>
    </li>
    <li role="presentation">
        <a id="tablabel4" aria-controls="tab4" tabindex="0" role="tab" data-toggle="tab" href="#tab4" aria-selected="false"><i class="icon-help"></i>&nbsp;Tab 4</a>
    </li>
    <li role="presentation">
        <a id="tablabel5" aria-controls="tab5" tabindex="0" role="tab" data-toggle="tab" href="#tab5" aria-selected="false">This tab title is really long hahahahahahahah</a>
    <button class="icon-error-circle btn btn-icon" data-action="close" aria-label="Close Tab"></button>
    </li>
</ul>
<div class="tab-content">
    <div id="tab1" aria-hidden="false" role="tabpanel" class="tab-pane active" aria-labelledby="tablabel1"> Tab 1 content</div>
    <div id="tab2" aria-hidden="true" role="tabpanel" class="tab-pane" aria-labelledby="tablabel2"> Tab 2 content</div>
    <div id="tab3" aria-hidden="true" role="tabpanel" class="tab-pane" aria-labelledby="tablabel3"> Tab 3 content</div>
    <div id="tab4" aria-hidden="true" role="tabpanel" class="tab-pane" aria-labelledby="tablabel4"> Tab 4 has an icon! Nice!</div>
    <div id="tab5" aria-hidden="true" role="tabpanel" class="tab-pane" aria-labelledby="tablabel5"> Tab 5 has a close button!</div>
</div>

How To Use

Don't change the background color of the tab
Tab 1 content
Tab 1 content
Tabs should not be used for navigation
Tab 1 content
Step 1 content

Allow text on tabs to truncate if there is not enough room to display the whole label

Tabs should have max width
Tab 1 content
Tab 1 content

Don't decrease the font-size of the label

The internal view should be the same background color as the tab
Tab 1 content
Tab 1 content
Don't nest tabs within tabs

Do use segmented controls within tabs

Don't use tabs for application view navigation of filtering