_nav

// src/components/template-components/header/_nav/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/header/_nav
$defs:
  item:
    type: object
    properties:
      title:
        type: string
      url:
        type: string
        format: uri-reference
additionalProperties: false
type: object
required:
  - items
  - label
properties:
  items:
    type: array
    items:
      $ref: '#/$defs/item'
      required:
        - title
      properties:
        below:
          type: array
          items:
            $ref: '#/$defs/item'
            required:
              - title
              - url
  label:
    type: string
  class:
    type: string

// src/components/template-components/header/_nav/mocks.yaml

label: Main
items:
  - title: Support
    url: url
  - title: Service
    below:
      - title: Contact
        url: url
      - title: Privacy
        url: url
      - title: Impressum
        url: url

// src/components/template-components/header/_nav/_nav.twig

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

{% macro render_list(items, level, index) %}
	<ul
		class="HeaderNav-list HeaderNav-list--lvl{{ level }}"
		id="{{ id }}-{{ level }}-{{ index }}"
	>
		{%- for item in items -%}
			<li
				class="HeaderNav-item HeaderNav-item--lvl{{ level }}"
			>
				{% if item.below %}
					<button
						type="button"
						class="HeaderNav-entry HeaderNav-entry--button HeaderNav-entry--lvl{{ level }} u-linkHover"
						aria-controls="{{ id }}-{{ level + 1 }}-{{ loop.index0 }}"
						aria-expanded="false"
					>
						<span itemprop="name">
							{{ item.title }}
						</span>
						<span class="HeaderNav-toggleIcon">
							{% include "@elements/icon/icon.twig" with {
								name: "chevron"
							} only %}
						</span>
					</button>
					{{ nav.render_list(item.below, level + 1, loop.index0) }}
				{% else %}
					<a
						class="HeaderNav-entry HeaderNav-entry--link HeaderNav-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="HeaderNav{% if class %} {{ class }}{% endif %}" aria-label="{{ label }}" itemscope itemtype="http://schema.org/SiteNavigationElement">
	{{ nav.render_list(items, level, 0) }}
</nav>
{%- endif -%}