We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.
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.
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 |