Segmented controls are used to control the switching of logically grouped views. In many cases this is also a type of filter, such as looking at VTB, and clicking the list button, which switches the view to a list of the same data. Another example of segmented control use would be as a set of related lists within a form.
<ul role="tablist" class="nav nav-segmented sn-tabs-basic">
<li role="presentation" class="active">
<a id="segmentedtab1" aria-controls="segmented1" tabindex="0" role="tab" data-toggle="segmented" href="#segmented1" aria-expanded="false">Tab 1</a></li>
<li role="presentation">
<a id="segmentedtab2" aria-controls="segmented2" tabindex="0" role="tab" data-toggle="segmented" href="#segmented2" aria-expanded="false">Tab 2</a>
</li>
<li role="presentation">
<a id="segmentedtab3" aria-controls="segmented3" tabindex="0" role="tab" data-toggle="segmented" href="#segmented3" aria-expanded="false">Tab 3</a>
</li>
</ul>
<div class="tab-content">
<div id="segmented1" aria-hidden="false" role="tabpanel" class="segmented-pane active" aria-labelledby="segmentedtab1">Tab 1 content</div>
<div id="segmented2" aria-hidden="true" role="tabpanel" class="segmented-pane" aria-labelledby="segmentedtab2">Tab 2 content</div>
<div id="segmented3" aria-hidden="true" role="tabpanel" class="segmented-pane" aria-labelledby="segmentedtab3">Tab 3 content</div>
</div>