Tabs

Components for organizing content in a tabbed interface.

Round/Thin

use class .tab-nav-round-thin

item 1 item 2 item 3 item 4

Left Item Right Item

Code Example

<div class="tab-nav-round-thin">
    <a class="item bg-ui-hover">item 1</a>
    <a class="item bg-ui-hover">item 2</a>
    <a class="item bg-ui-hover">item 3</a>
    <a class="item bg-ui-hover">item 4</a>
</div>

<div class="tab-nav-round-thin">
    <a class="item current">Left Item</a>
    <a class="item">Right Item</a>
</div>

Thin

use class .tab-nav-thin

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav-thin">
    <a class="item">item 1</a>
    <a class="item">item 2</a>
    <a class="item current">item 3</a>
    <a class="item">item 4</a>
</div>

Square

use class .tab-nav

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav">
    <a class="item current">item 1</a>
    <a class="item">item 2</a>
    <a class="item">item 3</a>
    <a class="item">item 4</a>
</div>

Round

use class .tab-nav-round

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav-round">
    <a class="item">item 1</a>
    <a class="item current">item 2</a>
    <a class="item">item 3</a>
    <a class="item">item 4</a>
</div>

Themed

Use any of our themes

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav-round">
    <a class="item bg-cta bg-cta-hover">item 1</a>
    <a class="item current bg-cta-dark bg-cta-hover">item 2</a>
    <a class="item bg-cta bg-cta-hover">item 3</a>
    <a class="item bg-cta bg-cta-hover">item 4</a>
</div>

Pills

use class .item-minimal on the children

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav">
    <a class="item-minimal current">item 1</a>
    <a class="item-minimal">item 2</a>
    <a class="item-minimal">item 3</a>
    <a class="item-minimal">item 4</a>
</div>

Themed Pills

use class .item-minimal on the children

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav theme-cta">
    <a class="item-minimal current btn-cta">item 1</a>
    <a class="item-minimal btn-cta">item 2</a>
    <a class="item-minimal btn-cta">item 3</a>
    <a class="item-minimal btn-cta">item 4</a>
</div>

Themed Pills 2

item 1 item 2 item 3 item 4

Code Example

<div class="tab-nav">
    <a class="item-minimal current bg-cta bg-cta-hover">item 1</a>
    <a class="item-minimal text-cta bg-cta-hover">item 2</a>
    <a class="item-minimal text-cta bg-cta-hover">item 3</a>
    <a class="item-minimal text-cta bg-cta-hover">item 4</a>
</div>

The Zen Test

Every component, section, and utility we ship will pass alignment, styling, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.