uswds_base-8.x-2.0-alpha1/templates/navigation/menu--primary_menu.html.twig

{#
/**
 * @file
 * Override of system/menu.html.twig for the primary menu.
 *
 * 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) }}

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

  {% if items %}

    {% if menu_level == 0 %}
      <ul class="usa-nav-primary usa-accordion" role="navigation">
    {% elseif menu_level == 1 %}
      <ul id="{% if megamenu  %}extended-mega-nav-section-{% else %}basic-nav-section-{% endif %}{{ button_id }}" class="usa-nav-submenu{% if megamenu %} usa-megamenu grid-col-fill{% endif %}" hidden>

      {% if duplicate_parent %}
      <li class="usa-nav-submenu-item">
        <a href="{{ parent.url }}">
          <span><strong>{{ parent.title }}</strong></span>
        </a>
      </li>
      {% endif %}
    {% else %}
      <ul class="usa-nav-submenu" hidden>
    {% endif %}

    {% for item in items %}

      <li class="{% if menu_level == 0 %}usa-nav-primary-item{% elseif megamenu and menu_level == 1 and item.below %}usa-megamenu-col{% else %}usa-nav-submenu-item{% 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  %}extended-mega-nav-section-{% else %}basic-nav-section-{% endif %}{{ loop.index }}">
            <span>{{ item.title }}</span>
          </button>
        {% endif %}
        {% if megamenu and menu_level < 2 and item.below %}
          {{ menus.menu_links(item.below, menu_level + 1, megamenu, loop.index, item, duplicate_parent) }}
        {% elseif menu_level == 0 and item.below %}
          {{ menus.menu_links(item.below, menu_level + 1, megamenu, loop.index, item, duplicate_parent) }}
        {% else %}
          <a href="{{ item.url }}"{% if menu_level == 0 %} class="usa-nav-link{% if item.in_active_trail %} usa-current{% endif %}" {% endif %}>
            <span>{{ item.title }}</span>
          </a>
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}