component

Tabs

Default

  <nav class="tabs">
    <ul>
      <li class="is-active">
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
    </ul>
  </nav>

With icons

  <nav class="tabs">
    <ul>
      <li class="is-active">
        <a href="#">
          <i class="is-left-icon fa-regular fa-glasses-round"></i>
          Overview
        </a>
      </li>
      <li>
        <a href="#">
          <i class="is-left-icon fa-regular fa-gauge"></i>
          Performance Appraisal
        </a>
      </li>
      <li>
        <a href="#">
          <i class="is-left-icon fa-regular fa-face-smile"></i>
          Happiness Index
        </a>
      </li>
    </ul>
  </nav>

Sizes

Tiny

  <nav class="tabs is-tiny">
    <ul>
      <li class="is-active">
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
    </ul>
  </nav>

Small

  <nav class="tabs is-small">
    <ul>
      <li class="is-active">
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
    </ul>
  </nav>

Default

  <nav class="tabs">
    <ul>
      <li class="is-active">
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
    </ul>
  </nav>

Medium

  <nav class="tabs is-medium">
    <ul>
      <li class="is-active">
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
    </ul>
  </nav>

Large

  <nav class="tabs is-large">
    <ul>
      <li class="is-active">
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
      <li>
        <a href="#">Tab Item</a>
      </li>
    </ul>
  </nav>