main-navigation

// src/components/template-components/header/main-navigation/main-navigation.html.twig

{% set meta_navigation = meta_navigation|merge({
  class: "MainNavigation-metaNavigation",
  has_search: false,
  variant: "mobile",
}) %}

{% set tracking_class = "Tracking--mainNavigationLink" %}

<div class="MainNavigation js-MainNavigation{% if class %} {{ class }}{% endif %}">
  <button class="MainNavigation-button js-MainNavigation-button" type="button">
    {% include "@elements/icon/icon.html.twig" with {
      name: "menu",
      class: "MainNavigation-buttonIcon MainNavigation-buttonIcon--menu"
    } only %}
    {% include "@elements/icon/icon.html.twig" with {
      name: "cross",
      class: "MainNavigation-buttonIcon MainNavigation-buttonIcon--cross"
    } only %}
    <span class="MainNavigation-buttonText u-typo-copy-small">Menü</span>
  </button>
  <nav class="MainNavigation-nav js-MainNavigation-nav" aria-label="Hauptnavigation">
    <div class="MainNavigation-content">
      <ul class="MainNavigation-list">
        {% for item in main_navigation %}
          <li class="MainNavigation-item">
            {% if item.dropdown_menu %}
              <button class="MainNavigation-label js-MainNavigation-label" title="{{ item.label }}" type="button">
                {{ item.label }}
                {% include "@elements/icon/icon.html.twig" with {
                  name: "chevron",
                  class: "MainNavigation-labelIcon"
                } only %}
              </button>
              {% include "@template-components/header/main-navigation/dropdown-menu/dropdown-menu.html.twig" with {
                overview_link: item.dropdown_menu.overview_link,
                menu: item.dropdown_menu.menu,
                class: "MainNavigation-dropdownMenu",
                tracking_class: tracking_class
              } only %}
            {% else %}
              <a class="MainNavigation-label{% if tracking_class %} {{ tracking_class }}{% endif %}" href="{{ item.url }}">
                {{ item.label }}
              </a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
      {% include "@template-components/header/meta-navigation/meta-navigation.html.twig" with meta_navigation only %}
    </div>
  </nav>
</div>