megamenu_sdc-1.0.x-dev/components/menu_links/menu_links.twig

{% set has_children = below or content %}
{% set item_classes = [
  'menu-item',
  menu_level == 1 ? 'menu-item-top-level',
  has_children ? 'menu-item--has-children',
  megamenu ? 'menu-item--megamenu'
] %}

<li {{ attributes.addClass(item_classes) }}>
  {% if has_children and not expanded %}
    {# Menu item with dropdown using details/summary #}
    <details class="menu dropdown dropdown-hover" {{ megamenu ? 'data-megamenu="true" data-menu-state="closed"' }}>
      <summary class="dropdown-toggle" role="button" tabindex="0">
        {% if url %}
          <a href="{{ url }}">{{ title }}</a>
        {% else %}
          {{ title }}
        {% endif %}
      </summary>
      <div {{ attributes.addClass(pane_classes) }}>
        {% if content %}
          {# Custom content in slot #}
          {{ content }}
        {% elseif below %}
          {# Render child links as nested menu #}
          <ul class="menu menu-compact">
            {% for child in below %}
              {{ include('megamenu_sdc:menu_links', {
                title: child.title,
                url: child.url,
                menu_level: menu_level + 1,
                menu_name: menu_name,
                megamenu: false,
                expanded: true,
                below: child.below,
                content: child.content
              }, with_context = false) }}
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    </details>
  {% else %}
    {# Simple menu item without dropdown #}
    {% if url %}
      <a href="{{ url }}" class="menu-link">
        {{ title }}
      </a>
    {% else %}
      <span class="menu-link">
        {{ title }}
      </span>
    {% endif %}
    {% if below %}
      {# Render child links as nested menu #}
      <ul class="menu menu-compact menu-below">
        {% for child in below %}
          {{ include('megamenu_sdc:menu_links', {
            title: child.title,
            url: child.url,
            menu_level: menu_level + 1,
            menu_name: menu_name,
            megamenu: false,
            expanded: true,
            below: child.below,
            content: child.content
          }, with_context = false) }}
        {% endfor %}
      </ul>
    {% endif %}
  {% endif %}
</li>