New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

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.

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

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

<div class="tabs is-centered">
<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>
<div class="tabs is-centered">
<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>

Sizes #

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

<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>
<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>
<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.
<div class="tabs is-boxed">
<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 mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the is-toggle modifier.

<div class="tabs is-toggle">
<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>
New! 0.6.2

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

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

<div class="tabs is-fullwidth">
<ul>
<li>
<a>
<span class="icon"><i class="fas fa-angle-left"></i></span>
<span>Left</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-angle-up"></i></span>
<span>Up</span>
</a>
</li>
<li>
<a>
<span>Right</span>
<span class="icon"><i class="fas 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.

<div class="tabs is-centered is-boxed">
<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>
<div class="tabs is-toggle is-fullwidth">
<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>
<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"></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>
<div class="tabs is-toggle is-fullwidth is-large">
<ul>
<li class="is-active">
<a>
<span class="icon"><i class="fas fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon"><i class="fas fa-file-alt"></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 $link
$tabs-link-active-color $link
$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
$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 $link
$tabs-toggle-link-active-border-color $link
$tabs-toggle-link-active-color $link-invert

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

Bulma Sponsors

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!