Tabs

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

Examples

Horizontal

Flat

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__horizontal-flat" active-tab="example__horizontal-flat-1" sliding-border>
  <div class="-py--1" slot="panels">
    <div class="chi-tabs-panel" id="example__horizontal-flat-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__horizontal-flat-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__horizontal-flat-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__horizontal-flat").tabs = [
    {
      label: 'Active Tab',
      id: 'example__horizontal-flat-1'
    },
    {
      label: 'Tab Link',
      id: 'example__horizontal-flat-2'
    },
    {
      label: 'Tab Link',
      id: 'example__horizontal-flat-3'
    }
  ];
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<ul class="chi-tabs -animated" id="example__horizontal-flat" role="tablist" aria-label="Tabs">
  <li class="-active">
    <a
      href="#example__horizontal-flat-1"
      role="tab"
      aria-selected="true"
      aria-controls="example__horizontal-flat-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#example__horizontal-flat-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="example__horizontal-flat-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#example__horizontal-flat-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="example__horizontal-flat-3">Tab Link</a>
  </li>
</ul>

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

<script>chi.tab(document.getElementById('example__horizontal-flat'));</script>

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__horizontal-flat" active-tab="example__horizontal-flat-1" sliding-border inverse extra-class="-px--3">
  <div class="-py--1 -px--3 -bg--white" slot="panels">
    <div class="chi-tabs-panel" id="example__horizontal-flat-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__horizontal-flat-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__horizontal-flat-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__horizontal-flat").tabs = [
    {
      label: 'Active Tab',
      id: 'example__horizontal-flat-1'
    },
    {
      label: 'Tab Link',
      id: 'example__horizontal-flat-2'
    },
    {
      label: 'Tab Link', 
      id: 'example__horizontal-flat-3'
    }
  ];
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<ul class="chi-tabs -animated -inverse" id="example__horizontal-flat" role="tablist" aria-label="Tabs">
  <li class="-active">
    <a
      href="#example__horizontal-flat-1"
      role="tab"
      aria-selected="true"
      aria-controls="example__horizontal-flat-1">Active Tab</a>
  </li>
  <li>
    <a
      href="#example__horizontal-flat-2"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="example__horizontal-flat-2">Tab Link</a>
  </li>
  <li>
    <a
      href="#example__horizontal-flat-3"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="example__horizontal-flat-3">Tab Link</a>
  </li>
</ul>

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

<script>chi.tab(document.getElementById('example__horizontal-flat'));</script>

Solid

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__horizontal-solid" active-tab="example__horizontal-solid-1" size="lg" solid border>
  <div slot="panels">
    <div class="chi-tabs-panel" id="example__horizontal-solid-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__horizontal-solid-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__horizontal-solid-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__horizontal-solid").tabs = [
    {
      label: 'Active Tab', 
      id: 'example__horizontal-solid-1'
    },
    {
      label: 'Tab Link', 
      id: 'example__horizontal-solid-2'
    },
    {
      label: 'Tab Link', 
      id: 'example__horizontal-solid-3'
    }
  ];
</script>

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

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

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

Vertical

Flat

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__vertical-flat" active-tab="example__vertical-flat-1" sliding-border vertical>
  <div slot="panels" class="chi-col -w--6 -w-sm--8 -bg--white -p--3">
    <div class="chi-tabs-panel" id="example__vertical-flat-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__vertical-flat-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__vertical-flat-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__vertical-flat").tabs = [
    {
      label: 'Active Tab',
      id: 'example__vertical-flat-1'
    },
    {
      label: 'Tab Link',
      id: 'example__vertical-flat-2'
    },
    {
      label: 'Tab Link',
      id: 'example__vertical-flat-3'
    }
  ];
</script>

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

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

<script>chi.tab(document.getElementById('example__vertical-flat'));</script>

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__vertical-flat-inverse" active-tab="example__vertical-flat-inverse-1" sliding-border vertical inverse>
  <div slot="panels" class="chi-col -w--6 -w-sm--8 -p--3">
    <div class="chi-tabs-panel" id="example__vertical-flat-inverse-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__vertical-flat-inverse-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__vertical-flat-inverse-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__vertical-flat").tabs = [
    {
      label: 'Active Tab',
      id: 'example__vertical-flat-1'
    },
    {
      label: 'Tab Link',
      id: 'example__vertical-flat-2'
    },
    {
      label: 'Tab Link',
      id: 'example__vertical-flat-3'
    }
  ];
</script>

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

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

<script>chi.tab(document.getElementById('example__vertical-flat-inverse'));</script>

Solid

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__vertical-solid" active-tab="example__vertical-solid-1" size="xl" vertical solid>
  <div slot="panels" class="chi-col -w--6 -w-sm--8 -p--3 -bg--white">
    <div class="chi-tabs-panel" id="example__vertical-solid-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__vertical-solid-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__vertical-solid-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__vertical-solid").tabs = [
    {
      label: 'Active Tab', 
      id: 'example__vertical-solid-1'
    },
    {
      label: 'Tab Link',
      id: 'example__vertical-solid-2'
    },
    {
      label: 'Tab Link',
      id: 'example__vertical-solid-3'
    }
  ];
</script>

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

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

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

Horizontal

Flat

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__portal-horizontal-flat" active-tab="example__portal-horizontal-flat-1" border sliding-border>
  <div slot="panels">
    <div class="chi-tabs-panel" id="example__portal-horizontal-flat-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-horizontal-flat-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-horizontal-flat-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__portal-horizontal-flat").tabs = [
    {
      label: 'Active Tab',
      id: 'example__portal-horizontal-flat-1'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-horizontal-flat-2'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-horizontal-flat-3'
    }
  ];
</script>

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

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

<script>chi.tab(document.getElementById('example__portal-horizontal-flat'));</script>

Solid

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__portal-horizontal-solid" active-tab="example__portal-horizontal-solid-1" size="lg" solid border>
  <div slot="panels">
    <div class="chi-tabs-panel" id="example__portal-horizontal-solid-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-horizontal-solid-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-horizontal-solid-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__portal-horizontal-solid").tabs = [
    {
      label: 'Active Tab',
      id: 'example__portal-horizontal-solid-1'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-horizontal-solid-2'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-horizontal-solid-3'
    }
  ];
</script>

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

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

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

Vertical

Flat

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__portal-vertical-flat" active-tab="example__portal-vertical-flat-1" vertical sliding-border>
  <div slot="panels">
    <div class="chi-tabs-panel" id="example__portal-vertical-flat-1" role="tabpanel">
      <p class="-text">Tab 1 content<p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-vertical-flat-2" role="tabpanel">
      <p class="-text">Tab 2 content<p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-vertical-flat-3" role="tabpanel">
      <p class="-text">Tab 3 content<p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__portal-vertical-flat").tabs = [
    {
      label: 'Active Tab',
      id: 'example__portal-vertical-flat-1'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-vertical-flat-2'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-vertical-flat-3'
    }
  ];
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

<div class="chi-grid">
  <div class="chi-col">
    <ul class="chi-tabs -vertical -animated" id="example__portal-vertical-flat" role="tablist" aria-label="Tabs">
      <li class="-active">
        <a
          href="#example__portal-vertical-flat-1"
          role="tab"
          aria-selected="true"
          aria-controls="example__portal-vertical-flat-1">Active Tab</a>
      </li>
      <li>
        <a
          href="#example__portal-vertical-flat-2"
          role="tab"
          tabindex="-1"
          aria-selected="false"
          aria-controls="example__portal-vertical-flat-2">Tab Link</a>
      </li>
      <li>
        <a
          href="#example__portal-vertical-flat-3"
          role="tab"
          tabindex="-1"
          aria-selected="false"
          aria-controls="example__portal-vertical-flat-3">Tab Link</a>
      </li>
    </ul>
  </div>
  <div class="chi-col">
    <div class="chi-tabs-panel -active" id="example__portal-vertical-flat-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-vertical-flat-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-vertical-flat-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</div>

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

Solid

Tab 1 content

Tab 2 content

Tab 3 content

Web Component
HTML Blueprint

<chi-tabs id="example__portal-vertical-solid" active-tab="example__portal-vertical-solid" size="xl" vertical solid>
  <div slot="panels">
    <div class="chi-tabs-panel" id="example__portal-vertical-solid-1" role="tabpanel">
      <p class="-text">Tab 1 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-vertical-solid-2" role="tabpanel">
      <p class="-text">Tab 2 content</p>
    </div>
    <div class="chi-tabs-panel" id="example__portal-vertical-solid-3" role="tabpanel">
      <p class="-text">Tab 3 content</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__portal-vertical-solid").tabs = [
    {
      label: 'Active Tab',
      id: 'example__portal-vertical-solid-1'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-vertical-solid-2'
    },
    {
      label: 'Tab Link',
      id: 'example__portal-vertical-solid-3'
    }
  ];
</script>

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

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

Web Component
HTML Blueprint

<chi-tabs id="example__default-link-behavior" active-tab="example__default-link-behavior-a" sliding-border>
  <div slot="panels">
    <div class="chi-tabs-panel" id="example__default-link-behavior-a" role="tabpanel">
      <p class="-text">Content for tab a</p>
    </div>
    <div class="chi-tabs-panel" id="example__default-link-behavior-b" role="tabpanel">
      <p class="-text">Content for tab b</p>
    </div>
    <div class="chi-tabs-panel" id="example__default-link-behavior-c" role="tabpanel">
      <p class="-text">Content for tab c</p>
    </div>
  </div>
</chi-tabs>

<script>
  document.getElementById("example__default-link-behavior").tabs = [
    {
      label: 'Active Tab',
      id: 'example__default-link-behavior-a'
    },
    {
      label: 'Tab Link',
      id: 'example__default-link-behavior-b'
    },
    {
      label: 'Tab Link',
      id: 'example__default-link-behavior-c'
    },
    {
      label: 'External Link',
      id: 'example__default-link-behavior-4',
      href: 'https://lib.lumen.com/chi/',
      target: '_self'
    }
  ];
</script>

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__default-link-behavior" role="tablist" aria-label="Tabs">
  <li class="-active">
    <a
      href="#example__default-link-behavior-a"
      role="tab"
      aria-selected="true"
      aria-controls="example__default-link-behavior-a">Active Tab</a>
  </li>
  <li>
    <a
      href="#example__default-link-behavior-b"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="example__default-link-behavior-b">Tab Link</a>
  </li>
  <li>
    <a
      href="#example__default-link-behavior-c"
      role="tab"
      aria-selected="false"
      tabindex="-1"
      aria-controls="example__default-link-behavior-c">Tab Link</a>
  </li>
  <li><a href="https://lib.lumen.com/chi/" target="_self">External Link</a></li>
</ul>

<div class="chi-tabs-panel -active" id="example__default-link-behavior-a" role="tabpanel">
  <p class="-text">Content for tab a</p>
</div>
<div class="chi-tabs-panel" id="example__default-link-behavior-b" role="tabpanel">
  <p class="-text">Content for tab b</p>
</div>
<div class="chi-tabs-panel" id="example__default-link-behavior-c" role="tabpanel">
  <p class="-text">Content for tab c</p>
</div>

<script>chi.tab(document.getElementById('example__default-link-behavior'));</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.

To control the navigation, the web component has support for href property for each of the tabs, or any of it's children. By default, any external link is opened in a new window, although it can be controlled through the target property.

Flat

<chi-tabs id="example__tabbed-navigation-flat" active-tab="tab-a" sliding-border></chi-tabs>

<script>
  document.querySelector('#example__tabbed-navigation-flat').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: 'External Links',
      id: 'tab-b',
      children: [
        {
          id: 'tab-b-external-link-new',
          label: 'Chi documentation in new tab',
          href: 'https://lib.lumen.com/chi/'
        },
        {
          id: 'tab-b-external-link-same',
          label: 'Chi documentation in same tab',
          href: 'https://lib.lumen.com/chi/',
          target: '_self'
        },
      ]
    },
    {
      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 class="chi-tabs" id="example__tabbed-navigation-flat">
  <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 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="https://lib.lumen.com/chi/" target="_blank">Chi documentation in new tab</a>
      <a class="chi-dropdown__menu-item" href="https://lib.lumen.com/chi/">Chi documentation in same tab</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>
  chi.navigation(document.getElementById('#example__tabbed-navigation-flat'));
</script>

Solid

<chi-tabs id="example__tabbed-navigation-solid" active-tab="tab-a" size="lg" solid></chi-tabs>

<script>
  document.querySelector('#example__tabbed-navigation-solid').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 class="chi-tabs -solid -border -lg" id="example__tabbed-navigation-solid">
  <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>
  chi.navigation(document.getElementById('example__tabbed-navigation-solid'));
</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.

Web Component
HTML Blueprint

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.

Enabled
Disabled

Web Component
HTML Blueprint

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>

Web Component
HTML Blueprint

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

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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<chi-tabs id="example__bordered" active-tab="example__bordered-1" border></chi-tabs>

<script>
  document.getElementById("example__bordered").tabs = [
    {
      label: 'Active Tab',
      id: 'example__bordered-1'
    },
    {
      label: 'Tab Link',
      id: 'example__bordered-2'
    },
    {
      label: 'Tab Link',
      id: 'example__bordered-3'
    }
  ];
</script>

<ul class="chi-tabs -border" id="example__bordered">
  <li class="-active">
    <a href="#">Active Tab</a>
  </li>
  <li>
    <a href="#">Tab link</a>
  </li>
  <li>
    <a href="#">Tab link</a>
  </li>
</ul>

<script>chi.tab(document.querySelector('#example__bordered'));</script>

Web Component
HTML Blueprint

<chi-tabs id="example__bordered" active-tab="example__bordered-1" border inverse></chi-tabs>

<script>
  document.getElementById("example__bordered").tabs = [
    {
      label: 'Active Tab',
      id: 'example__bordered-1'
    },
    {
      label: 'Tab Link',
      id: 'example__bordered-2'
    },
    {
      label: 'Tab Link',
      id: 'example__bordered-3'
    }
  ];
</script>

<ul class="chi-tabs -inverse -border" id="example__bordered">
  <li class="-active">
    <a href="#">Active Tab</a>
  </li>
  <li>
    <a href="#">Tab link</a>
  </li>
  <li>
    <a href="#">Tab link</a>
  </li>
</ul>

<script>chi.tab(document.querySelector('#example__bordered'));</script>

Additional Sizes

Horizontal

X-small

Small

Medium (Base)

Large

Web Component
HTML Blueprint

Use the property "size" with the desired value. Allowed values are: 'xs', 'sm', 'md', 'lg', 'xl'

<!-- X-small -->
<chi-tabs id="example__additional-sizes-horizontal-xs" active-tab="example__additional-sizes-horizontal-xs-1" size="xs"></chi-tabs>

<!-- Small -->
<chi-tabs id="example__additional-sizes-horizontal-sm" active-tab="example__additional-sizes-horizontal-sm-1" size="sm"></chi-tabs>

<!-- Medium (Base) -->
<chi-tabs id="example__additional-sizes-horizontal-md" active-tab="example__additional-sizes-horizontal-md-1"></chi-tabs>

<!-- Large -->
<chi-tabs id="example__additional-sizes-horizontal-lg" active-tab="example__additional-sizes-horizontal-lg-1" size="lg"></chi-tabs>

<script>
  document.getElementById("example__additional-sizes-horizontal-xs").tabs = [
    {
      label: 'Active Tab',
      id: 'example__additional-sizes-horizontal-xs-1'
    },
    {
      label: 'Tab Link',
      id: 'example__additional-sizes-horizontal-xs-2'
    },
    {
      label: 'Tab Link',
      id: 'example__additional-sizes-horizontal-xs-3'
    }
  ];
</script>

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

<script>
  chi.tab(document.querySelector('#example__additional-sizes-horizontal-xs'));
</script>

Vertical

Web Component
HTML Blueprint

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

Web Component
HTML Blueprint

<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="Tabs">
        <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="Tabs">
        <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="Tabs">
            <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="Tabs">
            <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="Tabs">
                <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="Tabs">
                <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="Tabs">
            <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="Tabs">
        <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`
`inverse`	`inverse`	To set inverse style	`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>`

Interfaces and types

Name	Interface
`TabTrigger`	interface TabTrigger { children: `TabTrigger[]`; parent?: `TabTrigger`; id: `string`; label?: `string`; overflow: `boolean`; target?: `string`; href?: `string`; visibleItems?: `number`; }

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