Tabs

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

Examples#

Horizontal#

Flat#

Tab 1 content

Tab 2 content

Tab 3 content

<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

<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

<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

<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

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

    <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

    <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

    <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

    <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

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

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

    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.

    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#

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

    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#

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