Tabs

Purpose

User’s need to flip between multiple focused panes/views of content.

Description

Tabs manage stacked panes of content, giving the users the ability to view only the content pane they are interested in. Each tab button has a corresponding content pane. Tabs build on a real world metaphor. The selected state is reinforced with the tab metaphor of a folder physically in front of the others in the set.

Basic functionality

You have multiple categories, views, and panes of content, but there is the need to only show one pane at a time.
Tabs are listed in a horizontal row.
Avoid overflowing tabs to new lines.
Tab titles should be short and predictable.
Tab buttons can contain icons, text, both, and even dropdowns.
Tab headings are sentence case. Only the first word and proper nouns are capitalized.

Normal tabs

The selected tab color should be the same color as the tab content.

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#" role="tab" data-toggle="tab">Active</a></li>
    <li><a href="#" role="tab" data-toggle="tab">Normal</a></li>
    <li class="disabled"><a role="tab">Disabled</a></li>
</ul>

Light tabs

Use when the tabs need less emphasis in relation to other navigational elements.

<ul class="nav nav-tabs nav-tabs-light" role="tablist">
    <li class="active"><a href="#" role="tab" data-toggle="tab">Active</a></li>
    <li><a href="#" role="tab" data-toggle="tab">Normal</a></li>
    <li class="disabled"><a role="tab">Disabled</a></li>
</ul>

Pill tabs

Use when the tabs need even less emphasis in relation to other navigational elements.

<ul class="nav nav-pills" role="tablist">
    <li class="active"><a href="#" role="tab" data-toggle="tab">Active</a></li>
    <li><a href="#" role="tab" data-toggle="tab">Normal</a></li>
    <li class="disabled"><a role="tab">Disabled</a></li>
</ul>

Nested tabs

HTML
Preview

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#" role="tab" data-toggle="tab">Template</a></li>
    <li><a href="#" role="tab" data-toggle="tab">History</a></li>
    <li><a href="#" role="tab" data-toggle="tab">Analytics</a></li>
</ul>
<div style="border-top: none; border-radius: 0;" class="panel panel-default">
    <ul class="nav nav-tabs nav-tabs-light" role="tablist">
        <li><a href="#" role="tab" data-toggle="tab">HTML</a></li>
        <li class="active"><a href="#" role="tab" data-toggle="tab">Preview</a></li>
    </ul>
    <div class="panel-body">
    </div>
</div>

Justified tabs

Evenly sized tabs distributed among the width of the container. This can improve alignment when the tabs are otherwise close to filling the width of the container.

<ul class="nav nav-tabs nav-justified" role="tablist">
    <li class="active"><a href="#" role="tab" data-toggle="tab">Activity</a></li>
    <li><a href="#" role="tab" data-toggle="tab">Info</a></li>
    <li><a href="#" role="tab" data-toggle="tab">Notes</a></li>
</ul>