zen-8.x-7.0-alpha15/STARTERKIT/components/navigation/tabs/tabs.twig

{#
/**
 * @file
 * Component for tabs.
 *
 * Variables:
 * - heading: [string] Accessible heading.
 * - modifier_class: [string] Classes to modify the default component styling.
 * - tabs: [array] The tabs. Each tab is an object containing:
 *   - active: [boolean] Whether the tab is the active tab.
 *   - text: [string] Text of the item.
 *   - url: [string] URL of the item (optional).
 */
#}
{{ attach_library('STARTERKIT/tabs') }}
{% if heading %}
  <h2 class="visually-hidden">{{ heading }}</h2>
{% endif %}
<ul class="tabs clearfix {{modifier_class}}">
  {% for tab in tabs %}
    {% set activeClass = tab.active ? 'is-active' : '' %}
    <li class="tabs__tab {{ activeClass }}">
      {% block link %}
        <a href="{{ tab.url }}" class="tabs__tab-link {{ activeClass }}">
          {{ tab.text }}
          {% if tab.active %}
            <span class="visually-hidden">{{ activeLabel|default('(active tab)') }}</span>
          {% endif %}
        </a>
      {% endblock link %}
    </li>
  {% endfor %}
</ul>