nav

// src/components/template-components/header/menu/nav/nav.twig

{% import _self as nav %}
{% set level = 1 %}

{% macro render_list(items, level, index) %}
	<ul
		class="HeaderMenuNav-list HeaderMenuNav-list--lvl{{ level }}"
		id="HeaderMenuNav-{{ level }}-{{ index }}"
	>
		{%- for item in items -%}
			<li
				class="HeaderMenuNav-item HeaderMenuNav-item--lvl{{ level }}"
			>
				{% if item.below %}
					<button
						type="button"
						class="HeaderMenuNav-entry HeaderMenuNav-entry--button HeaderMenuNav-entry--lvl{{ level }} u-linkHover"
						aria-controls="HeaderMenuNav-{{ level + 1 }}-{{ loop.index0 }}"
						aria-expanded="false"
					>
						<span itemprop="name">
							{{ item.title }}
						</span>
						<span class="HeaderMenuNav-toggleIcon">
							{% include "@elements/icon/icon.twig" with {
								name: "chevron"
							} only %}
						</span>
					</button>
					{{ nav.render_list(item.below, level + 1, loop.index0) }}
				{% else %}
					<a
						class="HeaderMenuNav-entry HeaderMenuNav-entry--link HeaderMenuNav-entry--lvl{{ level }} u-linkHover"
						href="{{ item.url }}"
						itemprop="url"
						{% if item.in_active_trail %} aria-current="page"{% endif %}
					>
						<span itemprop="name">
							{{ item.title }}
						</span>
					</a>
				{% endif %}
			</li>
		{%- endfor -%}
	</ul>
{% endmacro %}

{%- if items|length > 0 -%}
<nav class="HeaderMenuNav" aria-label="{{ label }}" itemscope itemtype="http://schema.org/SiteNavigationElement">
	{{ nav.render_list(items, level, 0) }}
</nav>
{%- endif -%}