<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 one</span>
    </button>
        <ul id="nav-section-one" class="usa-nav-submenu">

            <li>
                <a href="#">Sub-link one</a>
            </li>

            <li>
                <a href="#">Sub-link two</a>
            </li>

        </ul>

    </li>

    <li>

        <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="nav-section-two">
      <span>Section two</span>
    </button>
        <ul id="nav-section-two" class="usa-nav-submenu">

            <li>
                <a href="#">Sub-link one</a>
            </li>

            <li>
                <a href="#">Sub-link two</a>
            </li>

        </ul>

    </li>

    <li>

        <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link three</span>
    </a>

    </li>

    <li>

        <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link four</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 %}">
      {% for child in link.links %}
      <li>
        <a href="{{ child.href }}">{{ child.text }}</a>
      </li>
      {% endfor %}
    </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}, true %}
{% endif %}
package:
  name: uswds
  version: 1.3.0
uswds:
  path: ../../dist
nav:
  search: null
  links:
    - text: Section one
      id: nav-section-one
      links:
        - text: Sub-link one
          href: '#'
        - text: Sub-link two
          href: '#'
    - text: Section two
      id: nav-section-two
      links:
        - text: Sub-link one
          href: '#'
        - text: Sub-link two
          href: '#'
    - text: Link three
      href: 'javascript:void(0)'
    - text: Link four
      href: 'javascript:void(0)'