Here, we talk about Navigation elements.
Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Summary</a></li>
<li class="tab-title"><a href="#panel2">Basics</a></li>
<li class="tab-title"><a href="#panel3">Budget</a></li>
<li class="tab-title"><a href="#panel4">Accounts</a></li>
</ul>
You can create a group of vertical tabs using minimal markup. Just adding the class .vertical changes the orientation of horizontal tabs.
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel1">Summary</a></li>
<li class="tab-title"><a href="#panel2">Basics</a></li>
<li class="tab-title"><a href="#panel3">Budget</a></li>
<li class="tab-title"><a href="#panel4">Accounts</a></li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.