Dropdown submenu

// src/components/template-components/header/main-navigation/dropdown-submenu/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/header/main-navigation/dropdown-submenu
additionalProperties: false
properties:
  overview_link:
    $ref: /template-components/header/main-navigation/overview-link
  menu:
    type: array
    items:
      type: object
      properties:
        label:
          type: string
        url:
          type: string
          format: uri-reference
  tracking_class:
    type: string

// src/components/template-components/header/main-navigation/dropdown-submenu/mocks.yaml

overview_link:
  $ref: /template-components/header/main-navigation/overview-link#donations
menu:
  - url: url
    label: Unterthema 1
  - url: url
    label: Unterthema 4
  - url: url
    label: Unterthema
  - url: url
    label: Unterthema 5 das auch mal über 2 Zeilen geht
  - url: url
    label: Unterthema 3

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


<div class="DropdownSubmenu u-grid{% if class %} {{ class }}{% endif %}">
  <button class="DropdownSubmenu-backButton u-brandLink{% if backButtonClass %} {{ backButtonClass }}{% endif %}" type="button">
    {% include "@elements/icon/icon.html.twig" with {
      name: "arrow",
      class: "DropdownSubmenu-backIcon"
    } only %}
    <span class="DropdownSubmenu-backText u-typo-copy-bold">Zurück zur Übersicht</span>
  </button>
  {% if overview_link %}
    <div class="DropdownSubmenu-overviewLink">
      {% include "@template-components/header/main-navigation/overview-link/overview-link.html.twig" with overview_link|merge({tracking_class: tracking_class}) only %}
    </div>
  {% endif %}
  {% if menu %}
    {% include "@template-components/header/main-navigation/dropdown-list/dropdown-list.html.twig" with {
      menu: menu,
      class: "DropdownSubmenu-list",
      labelClass: "DropdownSubmenu-label",
      tracking_class: tracking_class
    } only %}
  {% endif %}
</div>