Tabs

Tabs provide additional navigation within a page or sub section of a page. They are available in primary and secondary styles.

Primary

To create a primary tab start with a <div> and add the .tabs and .is-primary classes. Then, insert an <ul> tag and place <a> tags wrapped in <li> tags inside the <ul> tag to create tab links. Set an active or disabled state to a tab link by adding a .is-active or .is-disabled class to a <li> tag.

Horizontal

Horizontal alignment is built into primary tabs by default.

 
<div class="tabs is-primary">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
<li class="is-disabled"><a>Tab 5</a></li>
</ul>
</div>
 

Vertical

Create a vertical primary tab by adding the .is-vertical class to a tab's outer <div>.

 
<div class="tabs is-primary is-vertical">
<ul>
<li><a>Tab 1</a></li>
<li class="is-active"><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
<li class="is-disabled"><a>Tab 5</a></li>
</ul>
</div>
 

Users who do not or cannot use pointing devices can tab through links. These links should be in a logical tabbing order, but if they aren't use the tabindex attribute to allow you to define the order.

Secondary

To create a secondary tab add the .is-secondary class to a tab's outer <div>.

 
<div class="tabs is-secondary">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
<li class="is-disabled"><a>Tab 5</a></li>
</ul>
</div>
 

Tab states

Tabs have an active state and disabled state. To implement either of these states simply add the .is-active or .is-disabled class to the <li> or <a> tag containing the tab item.

Vertical primary link state

 
<div class="tabs is-primary is-vertical">
<ul>
<li><a>Tab 1</a></li>
<li><a class="is-active">Tab 2</a></li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
<li class="is-disabled"><a>Tab 5</a></li>
</ul>
</div>
 

Hide & show tabs

It is useful to hide vertical tabs on screens tablet size and smaller. To do this, add the .tablet-down-hide-left class to the tab's outer <div> tag.

 
<div class="tabs is-primary is-vertical tablet-down-hide-left">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
<li class="is-disabled"><a>Tab 5</a></li>
</ul>
</div>
 

Variables

You can use these variables in a override.css file to customize this component.