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