---
title: Tabs
layout: documentation
doc-tab: components
doc-subtab: tabs
breadcrumb:
- home
- documentation
- components
- components-tabs
meta:
colors: false
sizes: true
variables: true
---
{% capture tabs_example %}
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.
{% include elements/snippet.html content=tabs_example horizontal=true %}
{% include elements/anchor.html name="Alignment" %}
To align the tabs list, use the is-centered or is-right modifier on the .tabs container:
{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
{% include elements/anchor.html name="Icons" %}
You can use any of the Font Awesome icons.
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include elements/anchor.html name="Sizes" %}
You can choose between 3 additional sizes: is-small is-medium and is-large.
{% include elements/snippet.html content=tabs_small_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
{% include elements/anchor.html name="Styles" %}
You can combine different modifiers. For example, you can have centered boxed tabs, or fullwidth toggle ones.
{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include elements/variables.html type='component' %}