Chi Documentation

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.

Horizontal

<ul class="a-tabs">
  <li class="-active">
    <a href="#">Active a Tab</a>
  </li>
  <li>
    <a href="#">a Tab Link</a>
  </li>
  <li>
    <a href="#">a 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>

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

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>

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>

Additional Sizes

Small

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

Large

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

JavaScript

Use Chi's optional tabs.js file to extend tab functionality by creating tabbable panes of content and animating active tab borders. Add the following script to your project and initialize each tab panel to activate.

<script src="https://assets.ctl.io/chi/0.8.3/tabs.js"></script>

Base

Content for tab a

Content for tab b

Content for tab c

<ul class="a-tabs" id="example-tabs">
  <li class="-active"><a href="#a">Tab a</a></li>
  <li><a href="#b">Tab b</a></li>
  <li><a href="#c">Tab c</a></li>
</ul>

<div class="a-tabs-panel -active" id="a">
  <p class="-text">Content for tab a</p>
</div>
<div class="a-tabs-panel" id="b">
  <p class="-text">Content for tab b</p>
</div>
<div class="a-tabs-panel" id="c">
  <p class="-text">Content for tab c</p>
</div>

<script>chiTabs.init(document.getElementById('example-tabs'));</script>

Keep default link behavior

By default, Chi JavaScript enabled tabs will ignore default link behavior. To preserve it, specify a target property on the link.

Content for tab a

Content for tab b

Content for tab c

<ul class="a-tabs" id="example-tabs-2">
  <li class="-active"><a href="#a">Tab a</a></li>
  <li><a href="#b">Tab b</a></li>
  <li><a href="#c">Tab c</a></li>
  <li><a href="https://assets.ctl.io/chi/" target="_self">External Link</a></li>
</ul>

<div class="a-tabs-panel -active" id="a">
  <p class="-text">Content for tab a</p>
</div>
<div class="a-tabs-panel" id="b">
  <p class="-text">Content for tab b</p>
</div>
<div class="a-tabs-panel" id="c">
  <p class="-text">Content for tab c</p>
</div>

<script>chiTabs.init(document.getElementById('example-tabs-2'));</script>

Vertical

The script also handles vertical tabs.

Content for tab a

Content for tab a-1

Content for tab a-2

Content for tab a-3

Content for tab b

Content for tab c

<ul class="a-tabs -vertical" id="example-tabs-3">
  <li class=" -active">
    <a href="#a3">Tab a</a>
    <ul class="a-tabs__subtabs">
      <li>
        <a href="#a3-1">Tab a-1</a>
      </li>
      <li>
        <a href="#a3-2">Tab a-2</a>
      </li>
      <li>
        <a href="#a3-3">Tab a-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#b3">Tab b</a>
  </li>
  <li>
    <a href="#c3">Tab c</a>
  </li>
</ul>
<div class="a-tabs-panel" id="a3">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="a3-1">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="a3-2">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="a3-3">
  <p class="-text">
    Content for tab a
  </p>
</div>
<div class="a-tabs-panel" id="b3">
  <p class="-text">
    Content for tab b
  </p>
</div>
<div class="a-tabs-panel" id="c3">
  <p class="-text">
    Content for tab c
  </p>
</div>

<script>chiTabs.init(document.getElementById('example-tabs3'));</script>