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

{% highlight html %}
{% endhighlight %}

Alignment

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

{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}

To have several lists aligned differently, use one of 3 modifiers on the ul:

  • is-left
  • is-center
  • is-right
{% highlight html %}
{% endhighlight %}

Icons

You can use any of the Font Awesome icons.

{% highlight html %}
{% endhighlight %}

Sizes

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

{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}

Styles

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

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

{% highlight html %}
{% endhighlight %}

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

{% highlight html %}
{% endhighlight %}

Combining

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

{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}
{% highlight html %}
{% endhighlight %}