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.
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.
<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> 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>
Allow text on tabs to truncate if there is not enough room to display the whole label
Don't decrease the font-size of the label
Do use segmented controls within tabs
Don't use tabs for application view navigation of filtering