Tabs are used to navigate between views within the same context.
To display tabs, apply the class a-tabs
to a ul
. Wrap the tab
links in li
tags and signify the active link with class -active
.
<ul class="a-tabs">
<li class="-active">
<a href="#">Active Tab</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>
<ul class="a-tabs -vertical">
<li class="-active">
<a href="#">Active Tab</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>
<ul class="a-tabs -icons">
<li class="-active">
<a href="#">
<div class="a-btn__content">
<div class="a-icon -sm">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
<span>Active Tab</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="a-btn__content">
<div class="a-icon -sm">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
<span>Tab Link</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="a-btn__content">
<div class="a-icon -sm">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
<span>Tab Link</span>
</div>
</a>
</li>
</ul>
<ul class="a-tabs -vertical -icons">
<li class="-active">
<a href="#">
<div class="a-icon -sm">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
<span>Active Tab</span>
</a>
</li>
<li>
<a href="#">
<div class="a-icon -sm">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
<span>Tab link</span>
</a>
</li>
<li>
<a href="#">
<div class="a-icon -sm">
<svg>
<use xlink:href="#workspace"></use>
</svg>
</div>
<span>Tab link</span>
</a>
</li>
</ul>
<ul class="a-tabs -vertical">
<li class="-active">
<a href="#">Active tab</a>
<ul class="a-tabs__subtabs">
<li class="-active">
<a href="#">Subtab Link</a>
</li>
<li>
<a href="#">Subtab Link</a>
</li>
<li>
<a href="#">Subtab Link</a>
</li>
</ul>
</li>
<li>
<a href="#">Tab link</a>
</li>
<li>
<a href="#">Tab link</a>
</li>
</ul>
<ul class="a-tabs -border">
<li class="-active">
<a href="#">Active tab</a>
</li>
<li>
<a href="#">Tab link</a>
</li>
<li>
<a href="#">Tab link</a>
</li>
</ul>
<ul class="a-tabs -small">
<li class="-active">
<a href="#">Active Tab</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>
<ul class="a-tabs -vertical -large">
<li class="-active">
<a href="#">Active Tab</a>
<ul class="a-tabs__subtabs">
<li class="-active">
<a href="#">Subtab Link</a>
</li>
<li>
<a href="#">Subtab Link</a>
</li>
<li>
<a href="#">Subtab Link</a>
</li>
</ul>
</li>
<li>
<a href="#">Tab Link</a>
</li>
<li>
<a href="#">Tab Link</a>
</li>
</ul>