Zakładki(ang. Tabs)

Zakładki to komponent, który pozwala na podzielenie treści strony na kilka widoków. Użytkownik może wygodnie nawigować pomiędzy nimi, nie zmieniając kontekstu całej strony. Jest to drugorzędny typ nawigacji w stosunku do menu.

Struktura

Zakładki
Kliknięcie zakładki zmienia zawartość widoku poniżej linii zakładek. Nazwy zakładek powinny być jak najbardziej zwięzłe. Rekomendowany limit nazwy jednej zakładki to 2 słowa, chociaż najlepiej jest używać tylko 1 słowa. W zakładkach nie należy stosować ikon. Rekomendowany limit zakładek w wariancie poziomym (przedstawionym wyżej) to 6. Wariant pionowy nie podlega temu ograniczeniu.
Separator
Oddziela zakładki od treści poszczególnych zakładek.
Treść zakładki
Może zawierać dowolne komponenty z wyjątkiem elementów typu menu, ścieżka czy stopka.

Klikalne są zakładki, które nie są w danym momencie wybrane (aktywne).

Warianty

Zakładki poziome

Treść


<nav style="margin-bottom: 0" class="tabs">
  <ul class="tabs__list">
    <li class="tabs__list-item">
      <a href="#" class="tab__link tab__link--active">Aktywna zakładka</a>
    </li>
    <li class="tabs__list-item">
      <a href="#" class="tab__link">Zakładka 2</a>
    </li>
    <li class="tabs__list-item">
      <a tabindex="-1" href="#" class="tab__link tab__link--inactive"
        >Inactive</a
      >
    </li>
  </ul>
</nav>
<div style="margin-top: 0" class="content">
  <span style="color: rgba(0, 0, 0, 0.2);" class="headline-1">Treść</span>
</div>

Zakładki pionowe

Wariant występujący jedynie na najszerszej rozdzielczości (desktop). Pozwala na pokazanie większej liczby zakładek niż w przypadku zakładek poziomych. Na tablecie i w wersji mobile w miejsce zakładek pionowych pojawiają się zakładki poziome. Używanie zakładek pionowych powinno być ograniczone do stron technicznych, prezentujących dużą ilość powiązanych ze sobą treści tekstowych. Nie należy zastępować zakładkami bocznymi funkcji menu.


<div class="grid">
  <div class="grid__col m-col--12 t-col--5 d-col--3">
    <nav class="tabs--vertical">
      <ul class="tabs__list">
        <li class="tabs__list-item">
          <a href="#" class="tab__link active">Aktywna zakładka</a>
        </li>
        <li class="tabs__list-item">
          <a href="#" class="tab__link">Zakładka 2</a>
        </li>
        <li class="tabs__list-item">
          <a href="#" class="tab__link">Zakładka 3</a>
        </li>
        <li class="tabs__list-item">
          <a href="#" class="tab__link">Zakładka 4</a>
        </li>
        <li class="tabs__list-item">
          <a href="#" class="tab__link">Zakładka 5</a>
        </li>
        <li class="tabs__list-item">
          <a href="#" class="tab__link">Zakładka 6</a>
        </li>
      </ul>
    </nav>
  </div>
</div>