_nav

// src/components/template-components/side-nav/_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
  classes:
    type: array
    items:
      type: string

// src/components/template-components/side-nav/_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/side-nav/_nav/_nav.twig

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

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