Tabs

Tabs are used to navigate between views within the same context.

Examples

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.

This component requires Javascript

Horizontal

<ul class="a-tabs">
  <li class="-active">
    <a href="#">Active Tab</a>
  </li>
  <li>
    <a href="#">a Tab Link</a>
  </li>
  <li>
    <a href="#">a Tab Link</a>
  </li>
</ul>

<ul class="a-tabs -inverse">
  <li class="-active">
    <a href="#">Active Tab</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
</ul>

Vertical

<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 -inverse -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>

Icons

<ul class="a-tabs -icons">
  <li class="-active">
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab Link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab Link</span>
    </a>
  </li>
</ul>

<ul class="a-tabs -inverse -icons">
  <li class="-active">
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab Link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab Link</span>
    </a>
  </li>
</ul>

<ul class="a-tabs -vertical -icons">
  <li class="-active">
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab link</span>
    </a>
  </li>
</ul>

<ul class="a-tabs -inverse -vertical -icons">
  <li class="-active">
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="a-icon">
        <svg>
          <use xlink:href="#icon-atom"></use>
        </svg>
      </div>
      <span>Tab link</span>
    </a>
  </li>
</ul>

Vertical Subtabs

<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 -inverse -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>

Bordered

<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 -inverse -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>

Additional Sizes

Extra small

<ul class="a-tabs -xs">
  <li class="-active">
    <a href="#">Active Tab</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
</ul>

Small

<ul class="a-tabs -sm">
  <li class="-active">
    <a href="#">Active Tab</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
</ul>

Large

<ul class="a-tabs -vertical -lg">
  <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>