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>

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>
 

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