Tabs

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

Examples

Horizontal

Tab 1 content
Tab 2 content
Tab 3 content
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-tabs" id="example-horizontal-base">
  <li class="-active"><a href="#horizontal-base-1">Active Tab</a></li>
  <li><a href="#horizontal-base-2">Tab Link</a></li>
  <li><a href="#horizontal-base-3">Tab Link</a></li>
</ul>

<div class="chi-tabs-panel -active" id="horizontal-base-1">Tab 1 content</div>
<div class="chi-tabs-panel" id="horizontal-base-2">Tab 2 content</div>
<div class="chi-tabs-panel" id="horizontal-base-3">Tab 3 content</div>

<script>chi.tab(document.getElementById('example-horizontal-base'));</script>
Tab 1 content
Tab 2 content
Tab 3 content
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-tabs -inverse" id="example-horizontal-inverse">
  <li class="-active"><a href="#horizontal-inverse-1">Active Tab</a></li>
  <li><a href="#horizontal-inverse-2">Tab Link</a></li>
  <li><a href="#horizontal-inverse-3">Tab Link</a></li>
</ul>

<div class="chi-tabs-panel -active" id="horizontal-inverse-1">Tab 1 content</div>
<div class="chi-tabs-panel" id="horizontal-inverse-2">Tab 2 content</div>
<div class="chi-tabs-panel" id="horizontal-inverse-3">Tab 3 content</div>

<script>chi.tab(document.getElementById('example-horizontal-inverse'));</script>

Vertical

Tab 1 content
Tab 2 content
Tab 3 content
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-tabs -vertical" id="example-vertical-base">
  <li class="-active"><a href="#vertical-base-1">Active Tab</a></li>
  <li><a href="#vertical-base-2">Tab Link</a></li>
  <li><a href="#vertical-base-3">Tab Link</a></li>
</ul>

<div class="chi-tabs-panel -active" id="vertical-base-1">Tab 1 content</div>
<div class="chi-tabs-panel" id="vertical-base-2">Tab 2 content</div>
<div class="chi-tabs-panel" id="vertical-base-3">Tab 3 content</div>

<script>chi.tab(document.getElementById('example-vertical-base'));</script>
Tab 1 content
Tab 2 content
Tab 3 content
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-tabs -inverse -vertical" id="example-vertical-inverse">
  <li class="-active"><a href="#vertical-inverse-1">Active Tab</a></li>
  <li><a href="#vertical-inverse-2">Tab Link</a></li>
  <li><a href="#vertical-inverse-3">Tab Link</a></li>
</ul>

<div class="chi-tabs-panel -active" id="vertical-inverse-1">Tab 1 content</div>
<div class="chi-tabs-panel" id="vertical-inverse-2">Tab 2 content</div>
<div class="chi-tabs-panel" id="vertical-inverse-3">Tab 3 content</div>

<script>chi.tab(document.getElementById('example-vertical-inverse'));</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

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-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="chi-tabs-panel -active" id="a">
  <p class="-text">Content for tab a</p>
</div>
<div class="chi-tabs-panel" id="b">
  <p class="-text">Content for tab b</p>
</div>
<div class="chi-tabs-panel" id="c">
  <p class="-text">Content for tab c</p>
</div>

<script>chi.tab(document.getElementById('example-tabs-2'));</script>

Tabbed navigation bar

The navigation component is a combination of Chi tabs and dropdowns components. You must use chi.navigation function to instantiate the whole group of components, and there is no need for instantiating the tabs nor the dropdowns independently. The navigation components will manage the lifecycle of the descendants' tabs and dropdowns.

Although navigation reproduces all the functionality that tabs and dropdowns have, like the sliding border or the animated chevron in the dropdowns, it also adds some other new functionalities like the automatic overflow menu, or a wait-for-animation option.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul id="navigationExample-1" class="chi-tabs">
  <li class="chi-dropdown -active">
    <a class="chi-dropdown__trigger" href="#">Active tab</a>
    <div class="chi-dropdown__menu">
      <a class="chi-dropdown__menu-item" href="#">Elem 1</a>
      <a class="chi-dropdown__menu-item" href="#">Elem 2</a>
      <div>
        <a class="chi-dropdown__menu-item chi-dropdown__trigger" href="#">Elem 3 more</a>
        <div class="chi-dropdown__menu">
          <a class="chi-dropdown__menu-item" href="#">Elem 3.1</a><a class="chi-dropdown__menu-item" href="#">Elem 3.2</a><a class="chi-dropdown__menu-item" href="#">Elem 3.3</a><a class="chi-dropdown__menu-item" href="#">Elem 3.4</a>
        </div>
      </div>
      <a class="chi-dropdown__menu-item" href="#">Elem 4</a>
    </div>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li class="chi-dropdown">
    <a class="chi-dropdown__trigger" href="#">Tab Dropdown</a>
    <div class="chi-dropdown__menu">
      <a class="chi-dropdown__menu-item" href="#">Element 1</a>
      <a class="chi-dropdown__menu-item" href="#">Element 2</a>
      <a class="chi-dropdown__menu-item" href="#">Element 3</a>
    </div>
  </li>
</ul>

<script>
  const navigationElem = document.getElementById('#navigationExample-1');
  chi.navigation(navigationElem);
</script>

Components contained

As navigation component is built from other primitive Chi components, most of the components behavior can be replicated on the navigation component. For example, you can use the -animate class on the dropdowns to make the chevron rotate when activated.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul class="chi-tabs" id="navigation-components-contained">
  <li class="chi-dropdown -active">
    <a class="chi-dropdown__trigger -animate" href="#">Active Tab</a>
    <div class="chi-dropdown__menu" x-placement="bottom-start">
      <a class="chi-dropdown__menu-item" href="#">Elem 1</a><a class="chi-dropdown__menu-item" href="#">Elem 2</a>
      <div>
        <a class="chi-dropdown__menu-item chi-dropdown__trigger" href="#">Elem 3 more</a>
        <div class="chi-dropdown__menu">
          <a class="chi-dropdown__menu-item" href="#">Elem 3.1</a><a class="chi-dropdown__menu-item" href="#">Elem 3.2</a><a class="chi-dropdown__menu-item" href="#">Elem 3.3</a><a class="chi-dropdown__menu-item" href="#">Elem 3.4</a>
        </div>
      </div><a class="chi-dropdown__menu-item" href="#">Elem 4</a>
    </div>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li>
    <a href="#">Tab Link</a>
  </li>
  <li class="chi-dropdown">
    <a class="chi-dropdown__trigger" href="#">Tab Link</a>
    <div class="chi-dropdown__menu">
      <a class="chi-dropdown__menu-item" href="#">Element 1</a><a class="chi-dropdown__menu-item" href="#">Element 2</a><a class="chi-dropdown__menu-item" href="#">Element 3</a>
    </div>
  </li>
</ul>

<script>chi.navigation(document.getElementById('navigation-components-contained'));</script>

Wait for animations

Browsers stop any execution of JavaScript as soon as a link is clicked and it starts to fetch the destination URL. For this reason, the sliding border animation will not be perceived by the user when an external link is clicked, as the animation will not be done, an this can be confusing for the user. To prevent this possible confusion, this component has the option to wait for the animation to finish and, then, it will redirect the user to the destination URL. You can enable this behavior by setting the waitForAnimations option to true.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul id="navigationexample-4-enabled" class="chi-tabs">
  <li class="-active">
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
</ul>
<script>
  const navigationElem = document.getElementById('#navigationexample-4-enabled');
  chi.navigation(
    navigationElem,
    {waitForAnimations: true}
  );
</script>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<ul id="navigationexample-4-disabled" class="chi-tabs">
  <li class="-active">
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
  <li>
    <a href="/">Tab Link</a>
  </li>
</ul>
<script>
  const navigationElem = document.getElementById('#navigationexample-4-disabled');
  chi.navigation(
    navigationElem,
    {waitForAnimations: false}
  );
</script>

Icons

Horizontal tabs with icons

<ul class="chi-tabs -icons">
  <li class="-active">
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab Link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab Link</span>
    </a>
  </li>
</ul>
<ul class="chi-tabs -inverse -icons">
  <li class="-active">
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab Link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab Link</span>
    </a>
  </li>
</ul>

Vertical tabs with icons

<ul class="chi-tabs -vertical -icons">
  <li class="-active">
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab link</span>
    </a>
  </li>
</ul>
<ul class="chi-tabs -inverse -vertical -icons">
  <li class="-active">
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom"></i>
      <span>Tab link</span>
    </a>
  </li>
</ul>

Vertical tabs with icons and description

<ul class="chi-tabs -vertical -icons -list">
  <li class="-active">
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom"></i>
      <span class="chi-tabs_item-title">Tab Link</span>
      <span class="chi-tabs_item-text">Tab description</span>
    </a>
  </li>
  <li>
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom"></i>
      <span class="chi-tabs_item-title">Active Tab</span>
      <span class="chi-tabs_item-text">Tab description</span>
    </a>
    <ul class="chi-tabs__subtabs">
        <li>
          <a class="chi-tabs_item" href="#">
            <span class="chi-tabs_item-title">Subtab Link</span>
            <span class="chi-tabs_item-text">Subtab description</span>
          </a>
        </li>
        <li>
          <a class="chi-tabs_item" href="#">
            <span class="chi-tabs_item-title">Subtab Link</span>
            <span class="chi-tabs_item-text">Subtab description</span>
          </a>
        </li>
        <li>
          <a class="chi-tabs_item" href="#">
            <span class="chi-tabs_item-title">Subtab Link</span>
            <span class="chi-tabs_item-text">Subtab description</span>
          </a>
        </li>
    </ul>
  </li>
  <li>
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom"></i>
      <span class="chi-tabs_item-title">Tab Link</span>
      <span class="chi-tabs_item-text">Tab description</span>
    </a>
  </li>
</ul>

Portal

<ul class="chi-tabs -vertical -icons -list -portal -lg">
  <li class="-active">
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom"></i>
      <span class="chi-tabs_item-title">Active Tab</span>
      <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
        <div class="chi-button__content">
          <i class="chi-icon icon-more-vert"></i>
        </div>
      </button>
    </a>
  </li>
  <li>
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom"></i>
      <span class="chi-tabs_item-title">Tab Link</span>
      <span class="chi-tabs_item-text">Tab description</span>
      <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
        <div class="chi-button__content">
          <i class="chi-icon icon-more-vert"></i>
        </div>
      </button>
    </a>
    <ul class="chi-tabs__subtabs">
        <li>
          <a class="chi-tabs_item" href="#">
            <span class="chi-tabs_item-title">Subtab Link</span>
            <span class="chi-tabs_item-text">Subtab description</span>
            <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
              <div class="chi-button__content">
                <i class="chi-icon icon-more-vert"></i>
              </div>
            </button>
          </a>
        </li>
        <li>
          <a class="chi-tabs_item" href="#">
            <span class="chi-tabs_item-title">Subtab Link</span>
            <span class="chi-tabs_item-text">Subtab description</span>
            <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
              <div class="chi-button__content">
                <i class="chi-icon icon-more-vert"></i>
              </div>
            </button>
          </a>
          <ul class="chi-tabs__subtabs">
              <li>
                <a class="chi-tabs_item" href="#">
                  <span class="chi-tabs_item-title">Subtab Link</span>
                  <span class="chi-tabs_item-text">Subtab description</span>
                  <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
                    <div class="chi-button__content">
                      <i class="chi-icon icon-more-vert"></i>
                    </div>
                  </button>
                </a>
              </li>
              <li>
                <a class="chi-tabs_item" href="#">
                  <span class="chi-tabs_item-title">Subtab Link</span>
                  <span class="chi-tabs_item-text">Subtab description</span>
                  <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
                    <div class="chi-button__content">
                      <i class="chi-icon icon-more-vert"></i>
                    </div>
                  </button>
                </a>
              </li>
          </ul>
        </li>
        <li>
          <a class="chi-tabs_item" href="#">
            <span class="chi-tabs_item-title">Subtab Link</span>
            <span class="chi-tabs_item-text">Subtab description</span>
            <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
              <div class="chi-button__content">
                <i class="chi-icon icon-more-vert"></i>
              </div>
            </button>
          </a>
        </li>
    </ul>
  </li>
  <li>
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom"></i>
      <span class="chi-tabs_item-title">Tab Link</span>
      <span class="chi-tabs_item-text">Tab description</span>
      <button class="chi-button -icon -flat -no-hover" aria-label="Button action">
        <div class="chi-button__content">
          <i class="chi-icon icon-more-vert"></i>
        </div>
      </button>
    </a>
  </li>
</ul>

Vertical Subtabs

<ul class="chi-tabs -vertical">
  <li class="-active">
    <a href="#">Active tab</a>
    <ul class="chi-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="chi-tabs -inverse -vertical">
  <li class="-active">
    <a href="#">Active tab</a>
    <ul class="chi-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="chi-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="chi-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

Horizontal

X-small

Small

Medium (Base)

Large

<!-- X-small -->
<ul class="chi-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="chi-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>

<!-- Medium (Base) -->
<ul class="chi-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>

<!-- Large -->
<ul class="chi-tabs -lg">
  <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

Small

Medium (Base)

Large

X-Large

<!-- Small -->
<ul class="chi-tabs -vertical -sm">
  <li class="-active">
    <a href="#">Active Tab</a>
    <ul class="chi-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>

<!-- Medium (Base) -->
<ul class="chi-tabs -vertical">
  <li class="-active">
    <a href="#">Active Tab</a>
    <ul class="chi-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>

<!-- Large -->
<ul class="chi-tabs -vertical -lg">
  <li class="-active">
    <a href="#">Active Tab</a>
    <ul class="chi-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>

<!-- X-Large -->
<ul class="chi-tabs -vertical -xl">
  <li class="-active">
    <a href="#">Active Tab</a>
    <ul class="chi-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

Options

This component accepts options to configure its behavior.

Option
Default
Description
overflowMenu
true
Only works for horizontal navigation components. It encloses overflowed tabs into a dropdown located at the end of the navigation component.
overflowMenuLabel
See More...
Text for the overflow menu dropdown.
waitForAnimations
false
Makes the browser wait for the sliding border to move to the clicked link before following links. It only works with common links.

Preventing memory leaks

chi.tab()

Tab components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elem = document.getElementById('example-tabs');
var tabComponent = chi.tab(elem);
// do stuff
tabComponent.dispose();

TipIt is safe to call the tab method more than once, as it will return any previously created tabs component associated to the trigger.

var elem = document.getElementById('example-tabs');
var tabComponent = chi.tab(elem);
var elem2 = document.getElementById('example-tabs');
var tabComponent2 = chi.tab(elem2);
tabComponent === tabComponent2; // returns true

tabComponent.dispose(); // Only have to do it once.

chi.navigation()

Navigation components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component. There is no need to call to tab and dropdown inner components dispose function as the navigation one will free resources of all internal components automatically.

var navigationElem = document.getElementById('#navigationElementId');
var navigationComponent = chi.navigation(navigationElem);
// do stuff
navigationComponent.dispose();

TipIt is safe to call the navigation factory function more than once, as it will return any previously created navigation component associated to the element.

var elem = document.getElementById('navigation-1');
var navigationComponent = chi.navigation(elem);
var elem2 = document.getElementById('navigation-1');
var navigationComponent2 = chi.navigation(elem2);
navigationComponent === navigationComponent2; // returns true

navigationComponent.dispose(); // Only have to do it once.

Accessibility

Accessibility guidelines coming soon