You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Tabs

## Simple responsive horizontal navigation tabs, with different styles

Since 0.4.4
Colors No
Sizes Yes
Variables Yes

Tabs only require a `tabs` container and a `<ul>` list.
The default tabs style has a single border at the bottom.

- Pictures
- Music
- Videos
- Documents

    <div class="tabs">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>

### Alignment

To align the tabs list, use the `is-centered` or `is-right` modifier on the `.tabs` container:

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-centered">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-right">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>

### Icons

You can use any of the Font Awesome icons.

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-centered">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon is-small"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

### Sizes #

You can choose between 3 additional sizes: `is-small` `is-medium` and `is-large`.

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-small">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-medium">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-large">
      <ul>
        <li class="is-active"><a>Pictures</a></li>
        <li><a>Music</a></li>
        <li><a>Videos</a></li>
        <li><a>Documents</a></li>
      </ul>
    </div>

### Styles

If you want a more classic style with borders, just append the `is-boxed` modifier.

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-boxed">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon is-small"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the `is-toggle` modifier.

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-toggle">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon is-small"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

If you want the tabs to take up the whole width available, use `is-fullwidth`.

- Left
- Up
- Right

    <div class="tabs is-fullwidth">
      <ul>
        <li>
          <a>
            <span class="icon"><i class="fa fa-angle-left"></i></span>
            <span>Left</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon"><i class="fa fa-angle-up"></i></span>
            <span>Up</span>
          </a>
        </li>
        <li>
          <a>
            <span>Right</span>
            <span class="icon"><i class="fa fa-angle-right"></i></span>
          </a>
        </li>
      </ul>
    </div>

### Combining

You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-centered is-boxed">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon is-small"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-toggle is-fullwidth">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon is-small"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-centered is-boxed is-medium">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon is-small"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

- Pictures
- Music
- Videos
- Documents

    <div class="tabs is-toggle is-fullwidth is-large">
      <ul>
        <li class="is-active">
          <a>
            <span class="icon"><i class="fa fa-image"></i></span>
            <span>Pictures</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon"><i class="fa fa-music"></i></span>
            <span>Music</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon"><i class="fa fa-film"></i></span>
            <span>Videos</span>
          </a>
        </li>
        <li>
          <a>
            <span class="icon"><i class="fa fa-file-text-o"></i></span>
            <span>Documents</span>
          </a>
        </li>
      </ul>
    </div>

### Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$tabs-border-bottom-color` | `$border`
`$tabs-border-bottom-style` | `solid`
`$tabs-border-bottom-width` | `1px`
`$tabs-link-color` | `$text`
`$tabs-link-hover-border-bottom-color` | `$text-strong`
`$tabs-link-hover-color` | `$text-strong`
`$tabs-link-active-border-bottom-color` | `$primary`
`$tabs-link-active-color` | `$primary`
`$tabs-link-padding` | `0.5em 1em`
`$tabs-boxed-link-radius` | `$radius`
`$tabs-boxed-link-hover-background-color` | `$background`
`$tabs-boxed-link-hover-border-bottom-color` | `$border`
`$tabs-boxed-link-active-background-color` | `$white`
`$tabs-boxed-link-active-border-color` | `$border`
`$tabs-boxed-link-active-border-bottom-color` | `transparent !important`
`$tabs-toggle-link-border-color` | `$border`
`$tabs-toggle-link-border-style` | `solid`
`$tabs-toggle-link-border-width` | `1px`
`$tabs-toggle-link-hover-background-color` | `$background`
`$tabs-toggle-link-hover-border-color` | `$border-hover`
`$tabs-toggle-link-radius` | `$radius`
`$tabs-toggle-link-active-background-color` | `$primary`
`$tabs-toggle-link-active-border-color` | `$primary`
`$tabs-toggle-link-active-color` | `$primary-invert`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!