<button class="usa-nav__close">
    <img src="../../dist/img/usa-icons/close.svg" role="img" alt="Cerrar">
</button>
<ul class="usa-nav__primary usa-accordion">
    <li class="usa-nav__primary-item">

        <button class="usa-accordion__button usa-nav__link usa-current" aria-expanded="false" aria-controls="undefinednav-section-one">
            <span>&lt;Current section&gt;</span>
        </button>

        <ul id="undefinednav-section-one" class="usa-nav__submenu">
            <li class="usa-nav__submenu-item">

                <a href="#">

                    &lt;Navigation link&gt;

                </a>

            </li>
            <li class="usa-nav__submenu-item">

                <a href="#">

                    &lt;Navigation link&gt;

                </a>

            </li>
            <li class="usa-nav__submenu-item">

                <a href="#">

                    &lt;Navigation link&gt;

                </a>

            </li>
        </ul>
    </li>
    <li class="usa-nav__primary-item">

        <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="undefinednav-section-two">
            <span>&lt;Section&gt;</span>
        </button>

        <ul id="undefinednav-section-two" class="usa-nav__submenu">
            <li class="usa-nav__submenu-item">

                <a href="#">

                    &lt;Navigation link&gt;

                </a>

            </li>
            <li class="usa-nav__submenu-item">

                <a href="#">

                    &lt;Navigation link&gt;

                </a>

            </li>
            <li class="usa-nav__submenu-item">

                <a href="#">

                    &lt;Navigation link&gt;

                </a>

            </li>
        </ul>
    </li>
    <li class="usa-nav__primary-item">

        <a href="javascript:void(0)" class="usa-nav__link">

            <span>&lt;Simple link&gt;</span>

        </a>

    </li>
</ul>

No notes defined.

{% macro primaryLink(href, class, is_current, text) %}
  {% set link_classes = class ~ ('usa-current' if is_current) %}
  <a href="{{ href }}" {% if link_classes %}class="{{ link_classes }}"{% endif %}>
    {% if class %}
      <span>{{ text }}</span>
    {% else %}
      {{ text }}
    {% endif %}
  </a>
{% endmacro %}

<button class="usa-nav__close">
  <img src="{{ uswds.path }}/img/usa-icons/close.svg" role="img" alt="{{ nav.close.label }}">
</button>
<ul class="usa-nav__primary usa-accordion">
  {%- for link in nav.links -%}
  <li class="usa-nav__primary-item">
    {% if link.links -%}
      {% set nav_id = nav.id_prefix ~ link.id %}

      <button
        class="usa-accordion__button usa-nav__link{% if link.is_current %} usa-current{% endif %}"
        aria-expanded="false"
        aria-controls="{{ nav_id }}">
        <span>{{ link.text }}</span>
      </button>
      {% if not nav.mega %}
        <ul id="{{ nav_id }}" class="usa-nav__submenu">
          {%- for child in link.links -%}
            {%- if loop.index < 4 -%}
              <li class="usa-nav__submenu-item">
                {{ primaryLink(child.href, '', child.is_current, child.text) }}
              </li>
            {%- endif -%}
          {%- endfor -%}
        </ul>
      {% else %}
        <div id="{{ nav_id }}" class="usa-nav__submenu usa-megamenu">
          <div class="grid-row grid-gap-4">
            {%- for group in link.links | batch(3) -%}
              <div class="usa-col">
                <ul class="usa-nav__submenu-list">
                  {%- for child in group -%}
                    <li class="usa-nav__submenu-item">
                      {{ primaryLink(child.href, '', child.is_current, child.text) }}
                    </li>
                  {%- endfor -%}
                </ul>
              </div>
            {%- endfor -%}
          </div>
        </div>
      {% endif %}
    {%- else -%}
      {{ primaryLink(link.href, 'usa-nav__link', link.is_current, link.text) }}
    {% endif -%}
  </li>
  {%- endfor -%}
</ul>
{%- if nav.search -%}
  {%
    set search_opts = {
      search_header: true,
      id_prefix: nav.id_prefix
    }
  %}

  {% if lang == "es" %}
    {% render '@search--small-lang-es', search_opts, true %}
  {% else %}
    {% render '@search--small', search_opts, true %}
  {% endif %}
{%- endif -%}
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
lang: es
nav:
  search: false
  close:
    label: Cerrar
  links:
    - text: <Current section>
      is_current: true
      id: nav-section-one
      links:
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
          is_current: false
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <A very long navigation link that goes onto two lines>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
    - text: <Section>
      id: nav-section-two
      links:
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
          is_current: false
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <A very long navigation link that goes onto two lines>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
        - text: <Navigation link>
          href: '#'
    - text: <Simple link>
      href: javascript:void(0)