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

Controls

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.

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

<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

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

CSS variables

You can customize the tabs elements with the following CSS variables.

.tabs__list {
  --border-color: hsl(0deg, 0%, 90%, 1);
  --border-width: 1px;
  --border-radius: 0;
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --item-padding: 0.75rem 1rem 0.5rem;
  --active-background-color: var(--color-white);
  --active-font-color: var(--color-link);
  --hover-background-color: var(--color-white);
  --hover-font-color: var(--color-link);
}

.tabs__content {
  --border-color: hsl(0deg, 0%, 90%, 1);
  --border-width: 1px;
  --border-radius: 0;
  --padding: 1rem;
  --background-color: transparent;
  --font-color: var(--color-black);
}
Copy

Sass variables

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