bulma/docs/cyp/components/tabs.html

---
layout: cypress
title: Components/Tabs
---

{% capture content_text %}
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
{% endcapture %}

{% capture content_icons %}
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
{% endcapture %}

<div id="tabs-lists" class="tabs">
  <ul class="is-left">
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>

  <ul class="is-center">
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>

  <ul class="is-right">
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
  </ul>
</div>

<div id="tabs" class="tabs">
  {{ content_text }}
</div>

<div id="tabs-centered" class="tabs is-centered">
  {{ content_text }}
</div>

<div id="tabs-right" class="tabs is-right">
  {{ content_text }}
</div>

<div id="tabs-small" class="tabs is-small">
  {{ content_text }}
</div>

<div id="tabs-medium" class="tabs is-medium">
  {{ content_text }}
</div>

<div id="tabs-large" class="tabs is-large">
  {{ content_text }}
</div>

<div id="tabs-boxed" class="tabs is-boxed">
  {{ content_icons }}
</div>

<div id="tabs-toggle" class="tabs is-toggle">
  {{ content_icons }}
</div>

<div id="tabs-toggle-rounded" class="tabs is-toggle is-toggle-rounded">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon is-small"><i class="fas fa-image"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-music"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-film"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>

<div id="tabs-fullwidth" class="tabs is-fullwidth">
  <ul>
    <li>
      <a>
        <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
        <span>Left</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
        <span>Up</span>
      </a>
    </li>
    <li>
      <a>
        <span>Right</span>
        <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
      </a>
    </li>
  </ul>
</div>

<div id="tabs-centered-boxed" class="tabs is-centered is-boxed">
  {{ content_icons }}
</div>

<div id="tabs-toggle-fullwidth" class="tabs is-toggle is-fullwidth">
  {{ content_icons }}
</div>

<div id="tabs-centered-boxed-medium" class="tabs is-centered is-boxed is-medium">
  {{ content_icons }}
</div>

<div id="tabs-toggle-fullwidth-large" class="tabs is-toggle is-fullwidth is-large">
  <ul>
    <li class="is-active">
      <a>
        <span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
        <span>Pictures</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
        <span>Music</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
        <span>Videos</span>
      </a>
    </li>
    <li>
      <a>
        <span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
        <span>Documents</span>
      </a>
    </li>
  </ul>
</div>