Dropdown list

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

$schema: http://json-schema.org/draft-07/schema#
$id: /template-components/header/main-navigation/dropdown-list
additionalProperties: false
required:
  - menu
properties:
  menu:
    type: array
    items:
      type: object
      properties:
        url:
          type: string
          format: uri-reference
        label:
          type: string
    label:
      type: string
    copy:
      type: string
    sub_menu:
      type: array
  tracking_class:
    type: string

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

menu:
  - url: url
    label: Meere
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Wälder
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Energiewende
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Landwirtschaft
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Klimakrise
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Frieden
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Endlager Umwelt und ain Platzhalter für ein 2-zeiliges Thema
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Artenvielfalt
    copy: Hier steht eine Mission zum Unterthema
    sub_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
  - url: url
    label: Greenpeace Magazin

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

<ul class="DropdownList{% if class %} {{ class }}{% endif %} js-DropdownList">
  {% for item in menu %}
    <li class="DropdownList-item">
      {% if not item.sub_menu %}
        <a class="DropdownList-label{% if labelClass %} {{ labelClass }}{% endif %}{% if tracking_class %} {{ tracking_class }}{% endif %}" href="{{ item.url }}">{{ item.label }}</a>
      {% else %}
        <button class="DropdownList-label js-DropdownList-label" type="button">
          {{ item.label }}
          {% include "@elements/icon/icon.html.twig" with {
            name: "chevron",
            class: "DropdownList-icon"
          } only %}
        </button>
        {% set overview_link = {
          copy: item.copy,
          label: item.label,
          url: item.url,
          } %}
        {% include "@template-components/header/main-navigation/dropdown-submenu/dropdown-submenu.html.twig" with {
          overview_link: overview_link,
          menu: item.sub_menu,
          class: "DropdownList-submenu",
          backButtonClass: "js-DropdownList-back",
          tracking_class: tracking_class
        } only %}
      {% endif %}
    </li>
  {% endfor %}
</ul>