menu

// src/components/template-components/side-nav/menu/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/side-nav/menu
additionalProperties: false
type: object
required:
  - items
properties:
  label:
    type: string
  items:
    type: array
    items:
      type: object
      properties:
        link:
          $ref: /elements/link
        title:
          type: string
        below:
          type: array
      anyOf:
        - required:
            - link
        - required:
            - below

// src/components/template-components/side-nav/menu/mocks.yaml

label: Main Menu
items:
  - title: Offene Stellen
    link:
      $ref: /elements/link#Extra-Large
  - title: Tätigkeitsbereich
    below:
      - $ref: /elements/link#medium
        title: Montage & Kundendienst
      - $ref: /elements/link#medium
        title: Produktion & Logistik
      - $ref: /elements/link#medium
        title: Vertrieb
      - $ref: /elements/link#medium
        title: Produktentwicklung & Technik
      - $ref: /elements/link#medium
        title: Verwaltung
      - $ref: /elements/link#medium
        title: Marketing & Digitales Kundenerlebnis
  - link:
      $ref: /elements/link#Extra-Large
      url: /component?file=templates/default&variation=Application%20form
    title: Initiativbewerbung
  - link:
      $ref: /elements/link#Extra-Large
    title: Partnerstellenangebote

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

<nav {% if label %} aria-label="{{ label }}"{% endif %} itemscope itemtype="http://schema.org/SiteNavigationElement" class="SideNavMenu">
	<ul class="SideNavMenu-list SideNavMenu-list--lv1 js-SideNavMenu-list--lv1 is-visible">
		{%- for item in items -%}
			{% set target_id = random() %}
			<li class="SideNavMenu-item u-typo-HeadlineM is-visible" itemprop="name">
				{% if item.below %}
					<button
						aria-controls="{{ target_id }}"
						aria-expanded="false"
						aria-label="Open sub-menu: {{ item.title }}"
						class="SideNavMenu-toggle js-SideNavMenu-toggle u-link"
						id="label-{{ target_id }}"
						type="button"
					>
						<span class="SideNavMenu-title">
							{{ item.title }}
						</span>
						{% include "@elements/icon/icon.twig" with {
							classes: ["SideNavMenu-toggleIcon"],
							name: "chevron_right",
							size: 'large'
						} only %}
					</button>
				{% else %}
					{% include "@elements/link/link.twig" with item|merge({
						label: item.title,
						classes: ['SideNavMenu-link'],
						itemprop: "url",
						size: "HeadlineM"
					}) only %}
				{% endif %}

				{%- if item.below -%}
					<ul class="SideNavMenu-list SideNavMenu-list--lv2" role="menu" id="{{ target_id }}" aria-labelledby="label-{{ target_id }}">
						{%- for child in item.below -%}
							<li class="SideNavMenu-item u-typo-TextL" role="menuitem">
								{% include "@elements/link/link.twig" with child|merge({
									label: child.title,
									classes: ['SideNavMenu-link'],
									itemprop: 'url',
									size: "TextL"
								}) only %}
							</li>
						{%- endfor -%}
					</ul>
				{%- endif -%}
			</li>
		{%- endfor -%}
	</ul>
</nav>