CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Tabs

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

Examples

Horizontal

Flat

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" role="tablist" aria-label="chi-tabs-horizontal">
  <li class="-active">
    <a
      href="#horizontal-base-1"
      role="tab"
      aria-selected="true"
      aria-controls="horizontal-base-1">Active Tab</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-base-2"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-base-2">Tab Link</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-base-3"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-base-3">Tab Link</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="horizontal-base-1" role="tabpanel">Tab 1 content</div>
<div class="chi-tabs-panel" id="horizontal-base-2" role="tabpanel">Tab 2 content</div>
<div class="chi-tabs-panel" id="horizontal-base-3" role="tabpanel">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" role="tablist" aria-label="chi-tabs-horizontal-inverse">
  <li class="-active">
    <a
      href="#horizontal-inverse-1"
      role="tab"
      aria-selected="true"
      aria-controls="horizontal-inverse-1">Active Tab</a></li>
  <li>
    <a
      href="#horizontal-inverse-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-inverse-2">Tab Link</a></li>
  <li>
    <a
      href="#horizontal-inverse-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-inverse-3">Tab Link</a></li>
</ul>

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

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

Solid

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 -solid -lg -border" id="example-horizontal-solid-bordered" role="tablist" aria-label="chi-tabs-horizontal">
  <li class="-active">
    <a
      href="#horizontal-solid-bordered-1"
      role="tab"
      aria-selected="true"
      aria-controls="horizontal-solid-bordered-1">Active Tab</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-solid-bordered-2"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-solid-bordered-2">Tab Link</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-solid-bordered-3"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-solid-bordered-3">Tab Link</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="horizontal-solid-bordered-1" role="tabpanel">Tab 1 content</div>
<div class="chi-tabs-panel" id="horizontal-solid-bordered-2" role="tabpanel">Tab 2 content</div>
<div class="chi-tabs-panel" id="horizontal-solid-bordered-3" role="tabpanel">Tab 3 content</div>

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

Vertical

Flat

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" role="tablist" aria-label="chi-tabs-vertical-base">
  <li class="-active">
    <a
      href="#vertical-base-1"
      role="tab"
      aria-selected="true"
      aria-controls="vertical-base-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#vertical-base-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="vertical-base-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#vertical-base-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="vertical-base-3">Tab Link</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="vertical-base-1" role="tabpanel">
  Tab 1 content
</div>
<div class="chi-tabs-panel" id="vertical-base-2" role="tabpanel">
  Tab 2 content
</div>
<div class="chi-tabs-panel" id="vertical-base-3" role="tabpanel">
  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" role="tablist" aria-label="vertical-inverse">
  <li class="-active">
    <a
      href="#vertical-inverse-1"
      role="tab"
      aria-selected="true"
      aria-controls="vertical-inverse-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#vertical-inverse-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="vertical-inverse-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#vertical-inverse-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="vertical-inverse-3">Tab Link</a>
  </li>
</ul>

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

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

Solid

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 -solid -xl" id="example-vertical-solid" role="tablist" aria-label="chi-tabs-portal-vertical-solid">
  <li class="-active">
    <a
      href="#vertical-solid-1"
      role="tab"
      aria-selected="true"
      aria-controls="vertical-solid-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#vertical-solid-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="vertical-solid-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#vertical-solid-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="vertical-solid-3">Tab Link</a>
  </li>
</ul>

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

<script>chi.tab(document.getElementById('example-vertical-solid'));</script>

Horizontal

Flat

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 -border" id="example-horizontal-bordered" role="tablist" aria-label="chi-tabs-horizontal">
  <li class="-active">
    <a
      href="#horizontal-bordered-1"
      role="tab"
      aria-selected="true"
      aria-controls="horizontal-bordered-1">Active Tab</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-bordered-2"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-bordered-2">Tab Link</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-bordered-3"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-bordered-3">Tab Link</a>
  </li>
</ul>

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

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

Solid

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 -solid -lg -border" id="example-horizontal-solid-bordered" role="tablist" aria-label="chi-tabs-horizontal">
  <li class="-active">
    <a
      href="#horizontal-solid-bordered-1"
      role="tab"
      aria-selected="true"
      aria-controls="horizontal-solid-bordered-1">Active Tab</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-solid-bordered-2"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-solid-bordered-2">Tab Link</a>
  </li>
  <li role="tab">
    <a
      href="#horizontal-solid-bordered-3"
      aria-selected="false"
      tabindex="-1"
      aria-controls="horizontal-solid-bordered-3">Tab Link</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="horizontal-solid-bordered-1" role="tabpanel">Tab 1 content</div>
<div class="chi-tabs-panel" id="horizontal-solid-bordered-2" role="tabpanel">Tab 2 content</div>
<div class="chi-tabs-panel" id="horizontal-solid-bordered-3" role="tabpanel">Tab 3 content</div>

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

Vertical

Flat

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-portal-vertical-flat" role="tablist" aria-label="chi-tabs-portal-vertical-flat">
  <li class="-active">
    <a
      href="#portal-vertical-flat-1"
      role="tab"
      aria-selected="true"
      aria-controls="portal-vertical-flat-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#portal-vertical-flat-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="portal-vertical-flat-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#portal-vertical-flat-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="portal-vertical-flat-3">Tab Link</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="portal-vertical-flat-1" role="tabpanel">
  Tab 1 content
</div>
<div class="chi-tabs-panel" id="portal-vertical-flat-2" role="tabpanel">
  Tab 2 content
</div>
<div class="chi-tabs-panel" id="portal-vertical-flat-3" role="tabpanel">
  Tab 3 content
</div>

<script>chi.tab(document.getElementById('example-portal-vertical-flat'));</script>

Solid

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 -solid -xl" id="example-portal-vertical-solid" role="tablist" aria-label="chi-tabs-portal-vertical-solid">
  <li class="-active">
    <a
      href="#portal-vertical-solid-1"
      role="tab"
      aria-selected="true"
      aria-controls="portal-vertical-solid-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#portal-vertical-solid-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="portal-vertical-solid-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#portal-vertical-solid-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="portal-vertical-solid-3">Tab Link</a>
  </li>
</ul>

<div class="chi-tabs-panel -active" id="portal-vertical-solid-1" role="tabpanel">
  Tab 1 content
</div>
<div class="chi-tabs-panel" id="portal-vertical-solid-2" role="tabpanel">
  Tab 2 content
</div>
<div class="chi-tabs-panel" id="portal-vertical-solid-3" role="tabpanel">
  Tab 3 content
</div>

<script>chi.tab(document.getElementById('example-portal-vertical-solid'));</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" role="tablist" aria-label="example-default-link-behavior">
  <li class="-active">
    <a
      href="#a2"
      role="tab"
      aria-selected="true"
      aria-controls="a2">Tab a</a>
  </li>
  <li>
    <a
      href="#b2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="ab2">Tab b</a>
  </li>
  <li>
    <a
      href="#c2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="c2">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="a2" role="tabpanel">
  <p class="-text">Content for tab a</p>
</div>
<div class="chi-tabs-panel" id="b2" role="tabpanel">
  <p class="-text">Content for tab b</p>
</div>
<div class="chi-tabs-panel" id="c2" role="tabpanel">
  <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.

Flat

<chi-tabs active-tab="tab-a" id="example__tabbed_navigation_flat" sliding-border></chi-tabs>

<script>
  const tabbedNavigationFlatElement = document.querySelector('#example__tabbed_navigation_flat');

  tabbedNavigationFlatElement.tabs = [
    {
      label: 'Active Tab',
      id: 'tab-a',
      children: [
        {
          label: 'Elem 1',
          id: 'tab-a-1'
        },
        {
          label: 'Elem 2',
          id: 'tab-a-2'
        },
        {
          label: 'Elem 3 more',
          id: 'tab-a-3',
          children: [
            {
              label: 'Elem 3.1',
              id: 'tab-a-3-1'
            },
            {
              label: 'Elem 3.2',
              id: 'tab-a-3-2',
              children: [
                {
                  label: 'Elem 3.2.1',
                  id: 'tab-a-3-2-1'
                },
                {
                  label: 'Elem 3.2.2',
                  id: 'tab-a-3-2-2'
                },
                {
                  label: 'Elem 3.2.3',
                  id: 'tab-a-3-2-3'
                }
              ]
            },
            {
              label: 'Elem 3.3',
              id: 'tab-a-3-3'
            },
            {
              label: 'Elem 3.4',
              id: 'tab-a-3-4'
            }
          ]
        },
        {
          label: 'Elem 4',
          id: 'tab-a-4'
        }
      ]
    },
    {
      label: 'Tab Link',
      id: 'tab-b'
    },
    {
      label: 'Tab Link',
      id: 'tab-c'
    },
    {
      label: 'Tab Link',
      id: 'tab-d'
    },
    {
      label: 'Tab Link',
      id: 'tab-e'
    },
    {
      label: 'Tab Link',
      id: 'tab-f'
    },
    {
      label: 'Tab Link',
      id: 'tab-g'
    },
    {
      label: 'Tab Dropdown',
      id: 'tab-h',
      children: [
        {
          label: 'Element 1',
          id: 'tab-h-1'
        },
        {
          label: 'Element 2',
          id: 'tab-h-2',
          children: [
            {
              label: 'Elem 1',
              id: 'tab-h-2-1'
            },
            {
              label: 'Elem 2',
              id: 'tab-h-2-2'
            },
            {
              label: 'Elem 3 more',
              id: 'tab-h-2-3',
              children: [
                {
                  label: 'Elem 3.1',
                  id: 'tab-h-2-3-1'
                },
                {
                  label: 'Elem 3.2',
                  id: 'tab-h-2-3-2'
                },
                {
                  label: 'Elem 3.3',
                  id: 'tab-h-2-3-3'
                }
              ]
            },
            {
              label: 'Elem 4',
              id: 'tab-h-2-4'
            }
          ]
        },
        {
          label: 'Element 3',
          id: 'tab-h-3'
        }
      ]
    }
  ];
</script>
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>

Solid

<chi-tabs active-tab="tab-a" id="example__tabbed_navigation_solid" size="lg" solid sliding-border></chi-tabs>

<script>
  const tabbedNavigationSolidElement = document.querySelector('#example__tabbed_navigation_solid');

  tabbedNavigationSolidElement.tabs = [
    {
      label: 'Active Tab',
      id: 'tab-a',
      children: [
        {
          label: 'Elem 1',
          id: 'tab-a-1'
        },
        {
          label: 'Elem 2',
          id: 'tab-a-2'
        },
        {
          label: 'Elem 3 more',
          id: 'tab-a-3',
          children: [
            {
              label: 'Elem 3.1',
              id: 'tab-a-3-1'
            },
            {
              label: 'Elem 3.2',
              id: 'tab-a-3-2',
              children: [
                {
                  label: 'Elem 3.2.1',
                  id: 'tab-a-3-2-1'
                },
                {
                  label: 'Elem 3.2.2',
                  id: 'tab-a-3-2-2'
                },
                {
                  label: 'Elem 3.2.3',
                  id: 'tab-a-3-2-3'
                }
              ]
            },
            {
              label: 'Elem 3.3',
              id: 'tab-a-3-3'
            },
            {
              label: 'Elem 3.4',
              id: 'tab-a-3-4'
            }
          ]
        },
        {
          label: 'Elem 4',
          id: 'tab-a-4'
        }
      ]
    },
    {
      label: 'Tab Link',
      id: 'tab-b'
    },
    {
      label: 'Tab Link',
      id: 'tab-c'
    },
    {
      label: 'Tab Link',
      id: 'tab-d'
    },
    {
      label: 'Tab Link',
      id: 'tab-e'
    },
    {
      label: 'Tab Dropdown',
      id: 'tab-f',
      children: [
        {
          label: 'Element 1',
          id: 'tab-f-1'
        },
        {
          label: 'Element 2',
          id: 'tab-f-2',
          children: [
            {
              label: 'Elem 1',
              id: 'tab-f-2-1'
            },
            {
              label: 'Elem 2',
              id: 'tab-f-2-2'
            },
            {
              label: 'Elem 3 more',
              id: 'tab-f-2-3',
              children: [
                {
                  label: 'Elem 3.1',
                  id: 'tab-f-2-3-1'
                },
                {
                  label: 'Elem 3.2',
                  id: 'tab-f-2-3-2'
                },
                {
                  label: 'Elem 3.3',
                  id: 'tab-f-2-3-3'
                }
              ]
            },
            {
              label: 'Elem 4',
              id: 'tab-f-2-4'
            }
          ]
        },
        {
          label: 'Element 3',
          id: 'tab-f-3'
        }
      ]
    }
  ];
</script>
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 -solid -border -lg">
  <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" aria-hidden="true"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></i>
      <span>Tab Link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></i>
      <span>Tab Link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></i>
      <span>Tab link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></i>
      <span>Active Tab</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></i>
      <span>Tab link</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
      <span class="chi-tabs_item-title">Tab Link</span>
      <span class="chi-tabs_item-text">Tab description</span>
    </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>

Vertical Tree Tabs

<ul class="chi-tabs -vertical -icons -list -tree -lg">
  <li class="-active">
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></i>
        </div>
      </button>
    </a>
  </li>
  <li>
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></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" aria-hidden="true"></i>
            </div>
          </button>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a class="chi-tabs_item" href="#">
      <i class="chi-icon icon-atom" aria-hidden="true"></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" aria-hidden="true"></i>
        </div>
      </button>
    </a>
  </li>
</ul>

Web Component

Properties

Property
Attribute
Description
Type
Default
activeTab
active-tab
To provide ID of the active tab
string
''
border
border
To enable border
boolean
false
seeMoreMessage
see-more-message
To configure See more Dropdown trigger message
string
TABS_SEE_MORE_DEFAULT_MESSAGE
size
size
To set tab size { xs, sm, md, lg, xl }.
"lg" | "md" | "sm" | "xl" | "xs"
'md'
slidingBorder
sliding-border
To enable animation of the border
boolean
false
solid
solid
To enable solid style of Tabs
boolean
false
tabs
--
To provide the data for Tabs
TabTrigger[]
undefined
vertical
vertical
To enable vertical variant of Tabs
boolean
false

Events

Event
Description
Type
chiTabChange
Triggered when the user activates a tab
CustomEvent<TabTrigger>

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