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.

Sidebar

Sidebar provide additional navigation within a page.

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



<div class="tabs is-primary is-vertical">
    <ul>
        <li class="tabs__section-header">Section Header</li>
        <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.

Variables

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

Variable Name CSS Property
$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