Dropdown menu

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

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/header/main-navigation/dropdown-menu
additionalProperties: false
properties:
  overview_link:
    $ref: /template-components/header/main-navigation/overview-link
  menu:
    $ref: /template-components/header/main-navigation/dropdown-list
  tracking_class:
    type: string

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

$variants:
  - $name: Climate protection
    overview_link:
      $ref: >-
        /template-components/header/main-navigation/overview-link#climate-protection
    menu:
      $ref: /template-components/header/main-navigation/dropdown-list
  - $name: Biodiversity
    overview_link:
      $ref: /template-components/header/main-navigation/overview-link#biodiversity
    menu:
      $ref: /template-components/header/main-navigation/dropdown-list
  - $name: Peace
    overview_link:
      $ref: /template-components/header/main-navigation/overview-link#peace
  - $name: Donations
    overview_link:
      $ref: /template-components/header/main-navigation/overview-link#donations
  - $name: Participate
    overview_link:
      $ref: /template-components/header/main-navigation/overview-link#participate
  - $name: About us
    overview_link:
      $ref: /template-components/header/main-navigation/overview-link#about-us

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

<div class="DropdownMenu js-DropdownMenu{% if class %} {{ class }}{% endif %}">
  {% if overview_link %}
    {% include "@template-components/header/main-navigation/overview-link/overview-link.html.twig" with {
      label: overview_link.label,
      url: overview_link.url,
      copy: overview_link.copy,
      tracking_class: tracking_class
    } only %}
  {% endif %}
  {% if menu %}
    <div class="u-grid">
      {% include "@template-components/header/main-navigation/dropdown-list/dropdown-list.html.twig" with menu|merge({
        class: "DropdownMenu-list",
        tracking_class: tracking_class
      }) only %}
    </div>
  {% endif %}
</div>