--- layout: documentation doc-tab: components doc-subtab: tabs --- {% include subnav-components.html %}

Tabs

Simple responsive horizontal navigation tabs, with different styles

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

{% capture tabs_example %}
{% endcapture %}
{{tabs_example}}
{% highlight html %} {{tabs_example}} {% endhighlight %}

Alignment

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

{% capture tabs_centered_example %}
{% endcapture %}
{{tabs_centered_example}}
{% highlight html %} {{tabs_centered_example}} {% endhighlight %} {% capture tabs_right_example %}
{% endcapture %}
{{tabs_right_example}}
{% highlight html %} {{tabs_right_example}} {% endhighlight %}

Icons

You can use any of the Font Awesome icons.

{% capture tabs_icons_example %}
{% endcapture %}
{{tabs_icons_example}}
{% highlight html %} {{tabs_icons_example}} {% endhighlight %}

Sizes

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

{% capture tabs_small_example %}
{% endcapture %}
{{tabs_small_example}}
{% highlight html %} {{tabs_small_example}} {% endhighlight %} {% capture tabs_medium_example %}
{% endcapture %}
{{tabs_medium_example}}
{% highlight html %} {{tabs_medium_example}} {% endhighlight %} {% capture tabs_large_example %}
{% endcapture %}
{{tabs_large_example}}
{% highlight html %} {{tabs_large_example}} {% endhighlight %}

Styles

If you want a more classic style with borders, just append the is-boxed modifier.
{% capture tabs_boxed_example %}
{% endcapture %}
{{tabs_boxed_example}}
{% highlight html %} {{tabs_boxed_example}} {% endhighlight %}

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

{% capture tabs_toggle_example %}
{% endcapture %}
{{tabs_toggle_example}}
{% highlight html %} {{tabs_toggle_example}} {% endhighlight %}

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

{% capture tabs_fullwidth_example %}
{% endcapture %}
{{tabs_fullwidth_example}}
{% highlight html %} {{tabs_fullwidth_example}} {% endhighlight %}

Combining

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

{% capture tabs_centered_boxed_example %}
{% endcapture %}
{{tabs_centered_boxed_example}}
{% highlight html %} {{tabs_centered_boxed_example}} {% endhighlight %} {% capture toggle_fullwidth_example %}
{% endcapture %}
{{tabs_toggle_fullwidth_example}}
{% highlight html %} {{tabs_toggle_fullwidth_example}} {% endhighlight %} {% capture tabs_centered_boxed_medium_example %}
{% endcapture %}
{{tabs_centered_boxed_medium_example}}
{% highlight html %} {{tabs_centered_boxed_medium_example}} {% endhighlight %} {% capture tabs_toggle_fullwidth_large_example %}
{% endcapture %}
{{tabs_toggle_fullwidth_large_example}}
{% highlight html %} {{tabs_toggle_fullwidth_large_example}} {% endhighlight %}