<button class="usa-nav-close">
  <img src="../../dist/img/close.svg" alt="close">
</button>
<ul class="usa-nav-primary usa-accordion">
    <li><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="nav-section-one">
      <span>Section title</span>
    </button>
        <ul id="nav-section-one" class="usa-nav-submenu">
            <div class="usa-megamenu-col">
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
            </div>
            <div class="usa-megamenu-col">
                <li>
                    <a href="#">Subsection title longer</a>
                </li>
                <li>
                    <a href="#">A very long page title that goes onto two lines</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
            </div>
            <div class="usa-megamenu-col">
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
            </div>
        </ul>
    </li>
    <li><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="nav-section-two">
      <span>Simple terms</span>
    </button>
        <ul id="nav-section-two" class="usa-nav-submenu">
            <div class="usa-megamenu-col">
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
            </div>
            <div class="usa-megamenu-col">
                <li>
                    <a href="#">Subsection title longer</a>
                </li>
                <li>
                    <a href="#">A very long page title that goes onto two lines</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
            </div>
            <div class="usa-megamenu-col">
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
                <li>
                    <a href="#">Subsection title</a>
                </li>
            </div>
        </ul>
    </li>
    <li><a class="usa-nav-link" href="javascript:void(0)">
      <span>Distinct from each other</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>
    {%- if link.links -%}
    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="{{ nav.id_prefix }}{{ link.id }}">
      <span>{{ link.text }}</span>
    </button>
    <ul id="{{ nav.id_prefix }}{{ link.id }}" class="usa-nav-submenu{% if nav.mega %} usa-megamenu usa-grid-full{% endif %}">
      {%- if nav.id_prefix == "basic-" or nav.id_prefix == "extended-" -%}
        {%- for child in link.links -%}
          {%- if loop.index < 4 -%}
            <li>
              <a href="{{ child.href }}">{{ child.text }}</a>
            </li>
          {%- endif -%}
        {%- endfor -%}
      {%- else -%}
        {%- for group in link.links | batch(3) -%}
          <div class="usa-megamenu-col">
            {%- for child in group -%}
              <li>
                <a href="{{ child.href }}">{{ child.text }}</a>
              </li>
            {%- endfor -%}
          </div>
        {%- endfor -%}
      {%- endif -%}
    </ul>
    {%- 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: 1.4.3
uswds:
  path: ../../dist
nav:
  search: null
  links:
    - text: Section title
      id: nav-section-one
      links:
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title longer
          href: '#'
        - text: A very long page title that goes onto two lines
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
    - text: Simple terms
      id: nav-section-two
      links:
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title longer
          href: '#'
        - text: A very long page title that goes onto two lines
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
        - text: Subsection title
          href: '#'
    - text: Distinct from each other
      href: 'javascript:void(0)'