---
title: Tab
description: The Tab component organizes content into sections, displaying one panel at a time.
---

## Default Tab

Note: All examples below require tabs to be [initialized from JavaScript](#init).

```html
<div class="env-tabs example-tabs">
   <ul class="env-tabs__nav env-tabs__nav--border-bottom" role="tablist">
      <li role="tab" aria-controls="panel1" aria-selected="true">Tab 1</li>
      <li role="tab" aria-controls="panel2" aria-selected="false">Tab 2</li>
      <li role="tab" aria-controls="panel3" aria-selected="false">Tab 3</li>
   </ul>
</div>
<div id="panel1" class="example-panel" role="tabpanel" aria-hidden="false">
   1
</div>
<div id="panel2" class="example-panel" role="tabpanel" aria-hidden="true">
   2
</div>
<div id="panel3" class="example-panel" role="tabpanel" aria-hidden="true">
   3
</div>
```

## Simple Tab

```html
<div class="env-tabs env-tabs--simple example-tabs1">
   <ul class="env-tabs__nav" role="tablist">
         <li
            id="tab4"
            role="tab"
            aria-controls="panel4"
            aria-selected="false"
            >Tab 4</li
         >
         <li
            id="tab5"
            role="tab"
            aria-controls="panel5"
            aria-selected="true"
            >Tab 5</li
         >
         <li
            id="tab6"
            role="tab"
            aria-controls="panel6"
            aria-selected="false"
            >Tab 6</li
         >
      </li>
   </ul>
</div>

<div
   id="panel4"
   class="example-panel"
   aria-labelledby="tab4"
   role="tabpanel"
   aria-hidden="true"
>
   4
</div>
<div
   id="panel5"
   class="example-panel"
   aria-labelledby="tab5"
   role="tabpanel"
   aria-hidden="false"
>
   5
</div>
<div
   id="panel6"
   class="example-panel"
   aria-labelledby="tab6"
   role="tabpanel"
   aria-hidden="true"
>
   6
</div>
```

## Stacked

Add class modifier `env-tabs--column` to tab stack container to make tabs vertical.

```html
<div class="env-tabs example-tabs3">
   <ul class="env-tabs__nav env-tabs--column" role="tablist">
      <li   id="tab7"
            role="tab"
            aria-controls="panel7"
            aria-selected="true"
            >Tab 7
      </li>
      <li   id="tab8"
            role="tab"
            aria-controls="panel8"
            aria-selected="false"
            >Tab 8
      </li>
      <li   id="tab9"
            role="tab"
            aria-controls="panel9"
            aria-selected="false"
            >Tab 9</a
         >
      </li>
      <li   id="tab10"
            role="tab"
            aria-controls="panel10"
            aria-selected="false"
            >Tab 10
      </li>
      <li   id="tab11"
            role="tab"
            aria-controls="panel11"
            aria-selected="false"
            >Tab 11
      </li>
   </ul>
</div>

<div
   id="panel7"
   class="example-panel"
   aria-labelledby="tab7"
   role="tabpanel"
   aria-hidden="false"
>
   7
</div>
<div
   id="panel8"
   class="example-panel"
   aria-labelledby="tab8"
   role="tabpanel"
   aria-hidden="true"
>
   8
</div>
<div
   id="panel9"
   class="example-panel"
   aria-labelledby="tab9"
   role="tabpanel"
   aria-hidden="true"
>
   9
</div>
<div
   id="panel10"
   class="example-panel"
   aria-labelledby="tab10"
   role="tabpanel"
   aria-hidden="true"
>
   10
</div>
<div
   id="panel11"
   class="example-panel"
   aria-labelledby="tab11"
   role="tabpanel"
   aria-hidden="true"
>
   11
</div>
```

<div id="init"></div>

## Initiation

```javascript
envision.tabs('.example-tabs');
```