Tab

Tabbed navigation for panels and content sections.

Basic usage

Tab 1Tab 2Tab 3Disabled

<div class="kit-tabbar">
  <a class="kit-tab -active" href="#">Tab 1</a>
  <a class="kit-tab" href="#">Tab 2</a>
  <a class="kit-tab" href="#">Tab 3</a>
  <a class="kit-tab -disabled" href="#">Disabled</a>
</div>

Vertical tabs

FilesSearchExtensions

<div class="kit-tabbar -vertical">
  <a class="kit-tab -active" href="#">Files</a>
  <a class="kit-tab" href="#">Search</a>
  <a class="kit-tab" href="#">Extensions</a>
</div>

Flat

Tab 1Tab 2

<div class="kit-tabbar -flat">
  <a class="kit-tab -active" href="#">Tab 1</a>
  <a class="kit-tab" href="#">Tab 2</a>
</div>

Compact

Tab 1Tab 2Tab 3

<div class="kit-tabbar -compact">
  <a class="kit-tab -active" href="#">Tab 1</a>
  <a class="kit-tab" href="#">Tab 2</a>
  <a class="kit-tab" href="#">Tab 3</a>
</div>

Semantic colors

PrimarySuccessDanger

<div class="kit-tabbar">
  <a class="kit-tab -primary -active" href="#">Primary</a>
  <a class="kit-tab -success -active" href="#">Success</a>
  <a class="kit-tab -danger -active" href="#">Danger</a>
</div>