Tabs

Horizontal navigation tabs

Tabs are great for creating horizontal navigation menus or tabbed interfaces containing multiple panels or documents. Get started with the tabs block and the following elements:

  • tabs__list must be a ul tag
  • tabs__content contains the tabbable content
<div class="tabs">
  <ul class="tabs__list">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</div>
Copy

Conrols

There are two state modifiers for tabs. The is-active modifier can be applied to an li tag to indicate the currently selected tab item. While the is-open modifier can be applied to the tabs__content element to toggle the containers visibility.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="tabs">
  <ul class="tabs__list">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
  <div class="tabs__content is-open">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>
</> Show code 
Copy

No content

Use of the tabs__content element is optional and you can use the tabs module just to create simple navigation menus.

<div class="tabs">
  <ul class="tabs__list">
    <li><a href="#">Home</a></li>
    <li class="is-active"><a href="#">Documentation</a></li>
    <li><a href="#">Examples</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</div>
</> Show code 
Copy

Style

Colors

You can use the color palette to override the color of active and hoverable tab items by prefixing the name of a color with is-* . For example to use the primary color you would add the is-primary modifier to the tabs element.

<div class="tabs is-primary">
  <ul class="tabs__list">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</div>

<div class="tabs is-dark">
  <ul class="tabs__list">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</div>

<div class="tabs is-danger">
  <ul class="tabs__list">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</div>
</> Show code 
Copy

Border

The has-border modifier will add a border to each li tag and tabs__content element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="tabs has-border">
  <ul class="tabs__list">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
  <div class="tabs__content is-open">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>
</> Show code 
Copy

Alignment

These modifiers are not specific to the Tabs module and can be found within the OrbitCSS global modifiers.

Center alignment

The has-centered modifier will position all of the items to the center of the tabs menu container.

<div class="tabs">
  <ul class="tabs__list has-centered">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</div>
</> Show code 
Copy

Right alignment

The has-end modifier will align all of the items to the end of the tabs menu container.

<div class="tabs">
  <ul class="tabs__list has-end">
    <li class="is-active"><a>Item 1</a></li>
    <li><a>Item 2</a></li>
    <li><a>Item 3</a></li>
    <li><a>Item 4</a></li>
  </ul>
</div>
</> Show code 
Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable Type Default Value
$tab-border-color color #e6e6e6
$tab-border-width units 1px
$tab-item-padding padding 0.75rem 1rem 0.5rem
$tab-item-color color $black
$tab-item-active-color color $link
$tab-border-radius units 0
$tab-content-padding units 1rem