uswds-8.x-2.1-rc1/templates/system/menu/menu--primary_menu.html.twig

{#
/**
 * @file
 * Override of system/menu.html.twig for the primary menu.
 * Heavily inspired by  https://www.drupal.org/project/uswds_base.
 *
 * Available variables:
 * - classes: A list of classes to apply to the top level <ul> element.
 * - dropdown_classes: A list of classes to apply to the dropdown <ul> element.
 * - menu_name: The machine name of the menu.
 * - items: A nested list of menu items. Each menu item contains:
 *   - attributes: HTML attributes for the menu item.
 *   - below: The menu item child items.
 *   - title: The menu link title.
 *   - url: The menu link url, instance of \Drupal\Core\Url
 *   - localized_options: Menu link localized options.
 *
 * @ingroup templates
 *
 * Define a custom macro that will render all menu trees.
 */
#}
{% import _self as menus %}
{#
  We call a macro which calls itself to render the full tree.
  @see http://twig.sensiolabs.org/doc/tags/macro.html
#}
{{ menus.menu_links(items, 0, megamenu, 0, NULL, duplicate_parent, NULL, mega_display_second) }}

{% macro menu_links(items, menu_level, megamenu, button_id, parent, duplicate_parent, region, mega_display_second) %}
  {% import _self as menus %}

  {% if items %}

    {% if menu_level == 0 %}
      <ul class="usa-nav__primary usa-accordion">
    {% elseif megamenu and menu_level == 1 %}
      <div id="{% if header_extended %}extended{% else %}basic{% endif %}-mega-nav-section-{{ button_id }}" class="usa-nav__submenu usa-megamenu" hidden="">

      {% if duplicate_parent %}
        <div class="grid-row grid-gap-4">
          <div class="desktop:grid-col-3">
            <div class="usa-nav__submenu-item">

              {# Sets a variable to store if link is present or not #}
              {% set noLink = (parent.url.routed and parent.url.routename == "<nolink>")%}
              {# If there is no link then display only title in the span. #}
              {% if not noLink %}<a href="{{ parent.url }}">{% endif %}
                <span><h3>{{ parent.title }}</h3></span>
              {% if not noLink %}</a>{% endif %}
              
            </div>
          </div>
        </div>
      {% endif %}

        <div class="grid-row grid-gap-4">
    {% else %}
      <ul id="basic-nav-section-{{ button_id }}" class="usa-nav__submenu{% if menu_level > 1 %}-list{% endif %}"{% if menu_level == 1  %} hidden=""{% endif %}>

      {% if duplicate_parent and megamenu == 0 %}
        <li class="usa-nav__submenu-item">
          {{ link(parent.title, parent.url) }} 
        </li>
      {% endif %}
    {% endif %}

    {% for item in items %}

      {% if megamenu and menu_level == 1 %}
        <div class="usa-col">

        {% if item.below and mega_display_second %}
          <div class="usa-nav__submenu-item">
          {% set noLink = (item.url.routed and item.url.routename == "<nolink>")%}
          {% if not noLink %}
            <a href="{{ item.url }}" class="usa-nav__link">
          {% endif %}
              <span><strong>{{ item.title }}</strong></span>
          {% if not noLink %}</a>{% endif %}
          </div>
        {% endif %}
      {% else %}
        <li class="{% if menu_level == 0 %}usa-nav__primary-item{% else %}usa-nav__submenu-item{% endif %}">
      {% endif %}

      {% if menu_level == 0 and item.below %}
        <button class="usa-accordion__button usa-nav__link {% if item.in_active_trail %}usa-current{% endif %}" aria-expanded="false" aria-controls="{% if megamenu and header_extended  %}extended-mega-nav-section-{% elseif megamenu %}basic-mega-nav-section-{% else %}basic-nav-section-{% endif %}{{ loop.index }}">
          <span>{{ item.title }}</span>
        </button>
      {% endif %}

      {% if item.below and ((megamenu and menu_level == 1) or menu_level == 0) %}
        {{ menus.menu_links(item.below, menu_level + 1, megamenu, loop.index, item, duplicate_parent, NULL, mega_display_second) }}
      {% else %}
        {% if megamenu and menu_level == 1 %}
          <div class="usa-nav__submenu-item">
        {% endif %}
       
        {% set noLink = (item.url.routed and item.url.routename == "<nolink>")%}
        {% if not noLink %}
          <a href="{{ item.url }}"{% if menu_level == 0 %} class="usa-nav__link{% if item.in_active_trail %} usa-current{% endif %}" {% endif %}>
        {% endif %}
            <span>{{ item.title }}</span>
        {% if not noLink %}
          </a>
        {% endif %}
        
        {% if megamenu and menu_level == 1 %}
          </div>
        {% endif %}
      {% endif %}

      {% if megamenu and menu_level == 1 %}
        </div>
      {% else %}
        </li>
      {% endif %}

    {% endfor %}

    {% if megamenu and menu_level == 1 %}
        </div>
      </div>
    {% else %}
      </ul>
    {% endif %}

  {% endif %}

{% endmacro %}