---
title: Tabs
description: Content is separated into different panes, and each pane is viewable one at a time. The user requests content to be displayed by clicking the content’s corresponding tab control.
foundation: http://foundation.zurb.com/sites/docs/tabs.html
sass: ./scss/_tabs.scss
js: ./js/bonsai.tabs.js
---

## How to Use

### Tabs Header

Use tabs for alternating between views within the same context (not to navigate to different areas)

#### Horizontal (default)

Construct the `.tabs` as an unordered list (`<ul>`) of links.

```html_example
<ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active">
        <a href="#horizontal-panel-1" aria-selected="true">I am a Tab</a>
    </li>
    <li class="tabs-title">
        <a href="#horizontal-panel-2">So Am I</a>
    </li>
    <li>
        <a href="#horizontal-panel-3" class="disabled">I'm Disabled</a>
    </li>
</ul>
```

<br />

#### Vertical

Add the `.vertical` class to the `<ul>` in order to display the tabs _vertically_

```html_example
<ul class="tabs vertical" data-tabs id="example-tabs">
    <li class="tabs-title is-active">
        <a href="#vertical-panel-1" aria-selected="true">I am a Tab</a>
    </li>
    <li class="tabs-title">
        <a href="#vertical-panel-2">So Am I</a>
    </li>
    <li>
        <a href="#vertical-panel-3" class="disabled">I'm Disabled</a>
    </li>
</ul>
```

<br />

### Tabbed Content

Construct the `.tabs-content` out of `<div>`s with associated `id`s.

```html_example
<div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel" id="content-panel-1">
        <p>
            PANEL_1: Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut
            eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non
            venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
        </p>
    </div>
    <div class="tabs-panel is-active" id="content-panel-2">
        <p>
            PANEL_2: Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie
            vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl
            tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
        </p>
    </div>
    <div class="tabs-panel" id="content-panel-3">
        <p>
            PANEL_3: Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu
            tellus rhoncus ut eleifend nibh porttitor.
        </p>
    </div>
</div>
```

_Note: only one of the `tabs-panel`s will be displayed at once, and the default is the div with `.is-active` ._


## Example

In putting it all together, be sure that your `href="#"` correctly match up to your `<div>` ids, and that these `id`s are unique.

```html_example
<ul class="tabs" data-tabs id="example-tabs">
    <li class="tabs-title is-active">
        <a href="#panel1" aria-selected="true">I am a Tab</a>
    </li>
    <li class="tabs-title">
        <a href="#panel2">So Am I</a>
    </li>
    <li>
        <a href="#panel3" class="disabled">I'm Disabled</a>
    </li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
        <p>
            PANEL_1: Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut
            eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non
            venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.
        </p>
    </div>
    <div class="tabs-panel" id="panel2">
        <p>
            PANEL_2: Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie
            vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl
            tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
        </p>
    </div>
    <div class="tabs-panel" id="panel3">
        <p>
            PANEL_3: Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu
            tellus rhoncus ut eleifend nibh porttitor.
        </p>
    </div>
</div>
```

## Accessibility
1. Provide high contrast between active and inactive tabs. Colour can't be the only difference.
2. Use screen-reader accessible methods to hide inactive panes.
3. Make sure users can navigate between and through tabs using their keyboard. - [[Web AIM keyboard tabindex techniques](http://webaim.org/techniques/keyboard/tabindex)]
4. Use appropriate ARIA roles for tabs and content panes. - [[WAI Aria Practices](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs.html)]

## Guidelines
1. The most important or commonly used tab should be selected by default.
2. Tab labels should be succinct and use plain language, 1-2 words so they are scannable.
3. Tab labels should be sentence case.
4. Logically chunk the content behind tabs so users can easily predict what they find when you select a given tab.  
5. Card sorting is a tactic that can find clear distinct groupings.
6. Tabs are parallel in nature.
7. Unselected tabs are clearly visible and readable.
8. Only one row of tabs.
9. Tabs should be on top.
10. Make sure tabs are large enough for touch navigation.

## Avoid
1. Do not use tabs for navigation to other areas.
2. Do not use when users need to see content in different tabs simultaneously or for comparison.
3. Do not set the default _selected tab_ and _displayed panel_ differently, or the page will load mis-matched.
4. Do not set the default to display a panel tied to a `.disabled` tab, or the user may see restricted content, and will
   not be able to navigate back to it after switching tabs.