Tabs

Tabs are high-level navigation components used to organize content into distinct panes, allowing only one panel to be visible at a time. This is ideal for reducing cognitive load when dealing with dense information like system settings.

• Based on jQuery UI Tabs

Component Anatomy

The tab system relies on a wrapper container to sync the navigation links with the content sections.

• .c-tab-container: The root wrapper.
• ul.c-tabs: The navigation bar containing tab triggers.
• li.c-tabs__item: The list item element.
• a.c-tabs__item__link: The anchor that toggles the specific pane via href.
• .c-tabs__content: The container for the actual pane data.

State Classes

Class	Description
-is-active	Applied to both the .c-tabs__item__link and the .c-tabs__content to indicate the visible state.

Example

This example demonstrates a functional layout including icons and a nested table to show how the tabs handle professional content.

• Übersicht
• Protokoll
• Historie

Allgemeine Informationen

Hier finden Sie die Stammdaten der gewählten Rezepturkomponente.

Prüfschritt	Ergebnis	Visum
Identitätsprüfung	Bestanden	Mayer

Es liegen keine archivierten Einträge vor.

Show Code

<div class="c-tab-container js-tabs">
  <ul class="c-tabs" role="tablist">
    <li class="c-tabs__item">
      <a href="#tab-overview" class="c-tabs__item__link -is-active" role="tab">
        <i class="far fa-info-circle" aria-hidden="true"></i>
        <span>Übersicht</span>
      </a>
    </li>
    <li class="c-tabs__item">
      <a href="#tab-protocol" class="c-tabs__item__link" role="tab">
        <i class="far fa-file-check" aria-hidden="true"></i>
        <span>Protokoll</span>
      </a>
    </li>
    <li class="c-tabs__item">
      <a href="#tab-history" class="c-tabs__item__link" role="tab">
        <i class="far fa-clock-three" aria-hidden="true"></i>
        <span>Historie</span>
      </a>
    </li>
  </ul>
  <div class="c-tabs__wrapper">
    <div id="tab-overview" class="c-tabs__content -is-active" role="tabpanel">
      <h3>Allgemeine Informationen</h3>
      <p>Hier finden Sie die Stammdaten der gewählten Rezepturkomponente.</p>
    </div>
    <div id="tab-protocol" class="c-tabs__content" role="tabpanel">
      <table class="c-table dataTable">
        <thead>
        <tr>
          <th>Prüfschritt</th>
          <th>Ergebnis</th>
          <th>Visum</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>Identitätsprüfung</td>
          <td>Bestanden</td>
          <td>Mayer</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div id="tab-history" class="c-tabs__content" role="tabpanel">
      <div class="c-alert -warning">
        <p>Es liegen keine archivierten Einträge vor.</p>
      </div>
    </div>
  </div>
</div>

Example with more items

• Oh, hello there!
• My Name's Tabby Tab
• I'd rather be an Accordion
• But that's okay
• Wow, look how fancy this tab item is
• Super duper fancy

Tab 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 5: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Tab 6: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore, libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?

Show Code

<div class="c-tab-container js-tabs">
  <ul class="c-tabs" role="tablist">
    <li class="c-tabs__item">
      <a class="c-tabs__item__link" href="#tab1" role="tab">
        <i class="fad fa-cog" aria-hidden="true"></i>
        Oh, hello there!
      </a>
    </li>
    <li class="c-tabs__item">
      <a class="c-tabs__item__link" href="#tab2" role="tab">
        <i class="fad fa-cog" aria-hidden="true"></i>
        My Name's Tabby Tab
      </a>
    </li>
    <li class="c-tabs__item">
      <a class="c-tabs__item__link" href="#tab3" role="tab">
        <i class="fad fa-box-check" aria-hidden="true"></i>
        I'd rather be an Accordion
      </a>
    </li>
    <li class="c-tabs__item">
      <a class="c-tabs__item__link" href="#tab4" role="tab">
        <i class="fad fa-file-signature" aria-hidden="true"></i>
        But that's okay
      </a>
    </li>
    <li class="c-tabs__item">
      <a class="c-tabs__item__link" href="#tab5" role="tab">
        <i class="fad fa-euro" aria-hidden="true"></i>
        Wow, look how fancy this tab item is
      </a>
    </li>
    <li class="c-tabs__item">
      <a class="c-tabs__item__link" href="#tab6" role="tab">
        <i class="fad fa-users" aria-hidden="true"></i>
        Super duper fancy
      </a>
    </li>
  </ul>
  <div>
    <div id="tab1" class="c-tabs__content" role="tabpanel">
      <p>
        Tab 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="tab2" class="c-tabs__content" role="tabpanel">
      <p>
        Tab 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="tab3" class="c-tabs__content" role="tabpanel">
      <p>
        Tab 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="tab4" class="c-tabs__content" role="tabpanel">
      <p>
        Tab 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="tab5" class="c-tabs__content" role="tabpanel">
      <p>
        Tab 5: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
    <div id="tab6" class="c-tabs__content" role="tabpanel">
      <p>
        Tab 6: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, asperiores aspernatur cupiditate doloribus eveniet fuga hic illum itaque labore,
        libero nemo nostrum odio quae quibusdam quod tenetur unde vero voluptatibus?
      </p>
    </div>
  </div>
</div>

Implementation Guidelines

• ID Mapping: The href of the link (e.g., #tab-overview) must correspond exactly to the id of the content div.
• Accessibility: Always use role="tablist", role="tab", and role="tabpanel" to ensure the navigation is usable for screen readers.

Settings and API

• initialize jQuery UI Tabs: Tab.init();
• add class .js-tabs on .c-tab-container