{% load menu_tags wagtail_design_system_tags %}
<ul class="design-system-nav__list">
  {% for item in menu_items %}
  <li class="design-system-nav__item">
    {% if item.id in mega_menus %}
    <button class="design-system-nav__btn" aria-expanded="false" {% if item.active_class %}aria-current="true" {% endif %}
      aria-controls="mega-menu-{{ item.id }}">{{ item.text }}</button>
    {% mega_menu item.id %}
    {% elif item.has_children_in_menu %}
    <button class="design-system-nav__btn" aria-expanded="false" {% if item.active_class %}aria-current="true" {% endif %}
      aria-controls="menu-{{ item.link_page.pk }}">{{ item.text }}</button>
    {% sub_menu item template="menus/custom_sub_menu.html" %}
    {% else %}
    <a href="{{ item.href }}" class="design-system-nav__link" {% if item.active_class %}aria-current="page" {% endif %}
      target="_self">{{ item.text }}</a>
    {% endif %}
    {% endfor %}
  </li>
</ul>