Get 20% off with code BULMA
Valid until the end of November 2024
Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Route Planner and Route Optimizer

Tabs

Simple responsive horizontal navigation tabs, with different styles

The Bulma tabs are a straightforward navigation component that come in a variety of versions. They only require the following structure:

  • a tabs container
  • a <ul> HTML element
  • a list of <li> HTML element
  • <a> HTML anchor elements for each link

The default tabs style has a single border at the bottom.

Example

HTML 

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

Example

HTML 

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

Example

HTML 

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

Example

HTML 

<div class="tabs is-centered">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

Sizes #

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

Example

HTML 

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

Example

HTML 

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

Example

HTML 

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

Example

HTML 

<div class="tabs is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></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.

Example

HTML 

<div class="tabs is-toggle">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

If you use both is-toggle and is-toggle-rounded, the first and last items will be rounded.

Example

HTML 

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

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

Example

HTML 

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

Combining #

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

Example

HTML 

<div class="tabs is-centered is-boxed">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

Example

HTML 

<div class="tabs is-toggle is-fullwidth">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

Example

HTML 

<div class="tabs is-centered is-boxed is-medium">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="fas fa-film" aria-hidden="true"></i
        ></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

Example

HTML 

<div class="tabs is-toggle is-fullwidth is-large">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon"
          ><i class="fas fa-image" aria-hidden="true"></i
        ></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"
          ><i class="fas fa-music" aria-hidden="true"></i
        ></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"
          ><i class="far fa-file-alt" aria-hidden="true"></i
        ></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$tabs-border-bottom-color
 
var(--bulma-tabs-border-bottom-color)
 
var(--bulma-border)
 
$tabs-border-bottom-style
 
var(--bulma-tabs-border-bottom-style)
 
solid
 
$tabs-border-bottom-width
 
var(--bulma-tabs-border-bottom-width)
 
1px
 
$tabs-link-color
 
var(--bulma-tabs-link-color)
 
var(--bulma-text)
 
$tabs-link-hover-border-bottom-color
 
var(--bulma-tabs-link-hover-border-bottom-color)
 
var(--bulma-text-strong)
 
$tabs-link-hover-color
 
var(--bulma-tabs-link-hover-color)
 
var(--bulma-text-strong)
 
$tabs-link-active-border-bottom-color
 
var(--bulma-tabs-link-active-border-bottom-color)
 
var(--bulma-link-text)
 
$tabs-link-active-color
 
var(--bulma-tabs-link-active-color)
 
var(--bulma-link-text)
 
$tabs-link-padding
 
var(--bulma-tabs-link-padding)
 
0.5em 1em
 
$tabs-boxed-link-radius
 
var(--bulma-tabs-boxed-link-radius)
 
var(--bulma-radius)
 
$tabs-boxed-link-hover-background-color
 
var(--bulma-tabs-boxed-link-hover-background-color)
 
var(--bulma-background)
 
$tabs-boxed-link-hover-border-bottom-color
 
var(--bulma-tabs-boxed-link-hover-border-bottom-color)
 
var(--bulma-border)
 
$tabs-boxed-link-active-background-color
 
var(--bulma-tabs-boxed-link-active-background-color)
 
var(--bulma-scheme-main)
 
$tabs-boxed-link-active-border-color
 
var(--bulma-tabs-boxed-link-active-border-color)
 
var(--bulma-border)
 
$tabs-boxed-link-active-border-bottom-color
 
var(--bulma-tabs-boxed-link-active-border-bottom-color)
 
transparent
 
$tabs-toggle-link-border-color
 
var(--bulma-tabs-toggle-link-border-color)
 
var(--bulma-border)
 
$tabs-toggle-link-border-style
 
var(--bulma-tabs-toggle-link-border-style)
 
solid
 
$tabs-toggle-link-border-width
 
var(--bulma-tabs-toggle-link-border-width)
 
1px
 
$tabs-toggle-link-hover-background-color
 
var(--bulma-tabs-toggle-link-hover-background-color)
 
var(--bulma-background)
 
$tabs-toggle-link-hover-border-color
 
var(--bulma-tabs-toggle-link-hover-border-color)
 
var(--bulma-border-hover)
 
$tabs-toggle-link-radius
 
var(--bulma-tabs-toggle-link-radius)
 
var(--bulma-radius)
 
$tabs-toggle-link-active-background-color
 
var(--bulma-tabs-toggle-link-active-background-color)
 
var(--bulma-link)
 
$tabs-toggle-link-active-border-color
 
var(--bulma-tabs-toggle-link-active-border-color)
 
var(--bulma-link)
 
$tabs-toggle-link-active-color
 
var(--bulma-tabs-toggle-link-active-color)
 
var(--bulma-link-invert)

How to support Bulma

One-time donation

Browser testing via

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#
Get started for Free
Get started for Free