<button class="usa-nav__close"><img src="../../dist/img/close.svg" alt="close"></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="nav-section-one"><span>Current section</span></button>
        <ul id="nav-section-one" class="usa-nav__submenu">
            <div class="grid-row grid-gap-4">
                <div class="desktop:grid-col-3">
                    <ul class="usa-nav__submenu-list">
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                    </ul>
                </div>
                <div class="desktop:grid-col-3">
                    <ul class="usa-nav__submenu-list">
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">A very long navigation link that goes onto two lines</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                    </ul>
                </div>
                <div class="desktop:grid-col-3">
                    <ul class="usa-nav__submenu-list">
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
    </li>
    <li class="usa-nav__primary-item">
        <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="nav-section-two"><span>Section</span></button>
        <ul id="nav-section-two" class="usa-nav__submenu">
            <div class="grid-row grid-gap-4">
                <div class="desktop:grid-col-3">
                    <ul class="usa-nav__submenu-list">
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                    </ul>
                </div>
                <div class="desktop:grid-col-3">
                    <ul class="usa-nav__submenu-list">
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">A very long navigation link that goes onto two lines</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                    </ul>
                </div>
                <div class="desktop:grid-col-3">
                    <ul class="usa-nav__submenu-list">
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                        <li class="usa-nav__submenu-item">
                            <a href="#">Navigation link</a>
                        </li>
                    </ul>
                </div>
            </div>
        </ul>
    </li>
    <li class="usa-nav__primary-item">
        <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
    </li>
</ul>

There are no notes for this item.

<button class="usa-nav__close"><img src="{{ uswds.path }}/img/close.svg" alt="close"></button>
<ul class="usa-nav__primary usa-accordion">
  {%- for link in nav.links -%}
  <li class="usa-nav__primary-item">
    {% if link.links -%}
    <button class="usa-accordion__button usa-nav__link{% if link.is_current %}  usa-current{% endif %}" aria-expanded="false" aria-controls="{{ nav.id_prefix }}{{ link.id }}"><span>{{ link.text }}</span></button>
    <{% if nav.mega %}div{% else %}ul{% endif %} id="{{ nav.id_prefix }}{{ link.id }}" class="usa-nav__submenu{% if nav.mega %} usa-megamenu{% endif %}">
      {%- if nav.id_prefix == "basic-" or nav.id_prefix == "extended-" -%}
        {%- for child in link.links -%}
          {%- if loop.index < 4 -%}
            <li class="usa-nav__submenu-item">
              <a href="{{ child.href }}">{{ child.text }}</a>
            </li>
          {%- endif -%}
        {%- endfor -%}
      {%- else -%}
        <div class="grid-row grid-gap-4">
          {%- for group in link.links | batch(3) -%}
            <div class="desktop:grid-col-3">
              <ul class="usa-nav__submenu-list">
                {%- for child in group -%}
                  <li class="usa-nav__submenu-item">
                    <a href="{{ child.href }}">{{ child.text }}</a>
                  </li>
                {%- endfor -%}
              </ul>
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}
    </{% if nav.mega %}div{% else %}ul{% endif %}>
    {%- else -%}
    <a class="usa-nav__link{% if link.current %} usa-current{% endif %}" href="{{ link.href }}"><span>{{ link.text }}</span></a>
    {% endif -%}
  </li>
  {%- endfor -%}
</ul>
{%- if nav.search -%}
  {% render '@search--header', {search: nav.search, id_prefix: nav.id_prefix}, true %}
{%- endif -%}
package:
  name: uswds
  version: 2.0.1
uswds:
  path: ../../dist
nav:
  search: null
  links:
    - text: Current section
      is_current: true
      id: nav-section-one
      links:
        - text: Navigation link
          href: '#'
        - text: Navigation link
          href: '#'
        - 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: '#'
        - 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)'