Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

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.


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

Variable Name CSS Property
--tabs-font-size font-size
--tabs-primary-bg-color background
--tabs-primary-padding padding
--tabs-parimary-tab-item-height height
--tabs-parimary-tab-item-padding padding
--tabs-parimary-tab-item-corner-radius border-radius
--tabs-parimary-tab-item-text-color color
--tabs-parimary-tab-item-active-bg-color background
--tabs-parimary-tab-item-active-text-color color
--tabs-parimary-tab-item-disabled-text-color color
--tabs-primary-vertical-width width
--tabs-primary-vertical-padding padding
--tabs-primary-vertical-tab-item-height height
--tabs-primary-vertical-tab-item-padding padding
--tabs-primary-vertical-tab-item-active-bg-color background
--tabs-primary-vertical-tab-item-active-border box-shadow
--tabs-primary-vertical-active-accordion-bg-color background
--tabs-primary-vertical-active-accordion-text-color color
--tabs-primary-vertical-active-accordion-text-weight bold
--tabs-primary-vertical-active-accordion-corner-radius border-radius
--tabs-secondary-border box-shadow
--tabs-secondary-tab-item-height height
--tabs-secondary-tab-item-padding padding
--tabs-secondary-tab-item-text-color color
--tabs-secondary-tab-item-active-text-color color
--tabs-secondary-tab-item-active-border box-shadow