<header class=“usa-header usa-header-extended” role=“banner”>

<div class="usa-navbar">
  <button class="usa-menu-btn">Menu</button>
  <div class="usa-logo" id="logo">
    <em class="usa-logo-text">
      <a href="{% if header.href %}{{ header.href }}{% else %}{{ site.baseurl }}/{% endif %}" title="Home">
        {{ header.title | default: site.title }}
      </a>
    </em>
  </div>
</div>

<nav role="navigation" class="usa-nav">
  <div class="usa-nav-inner">
    <button class="usa-nav-close">
      <img src="{{ site.baseurl }}/assets/uswds/img/close.svg" alt="close">
    </button>

    {% assign _primary = header.primary.links %}
    {% assign primary_links = site.data.navigation[_primary] | default: _primary %}
    {% if primary_links %}
    <ul class="usa-nav-primary usa-accordion">
      {% for _section in primary_links %}
      <li>
        {% if _section.links %}
          {% assign section_links = site.data.navigation[_section.links] | default: _section.links %}
          {% assign _section_id = _section.id %}
          {% unless _section_id %}{% assign _section_id = 'nav-' | append: forloop.index %}{% endunless %}
        <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="{{ _section_id }}">
          <span>{{ _section.text }}</span>
        </button>
        <ul id="{{ _section_id }}" class="usa-nav-submenu" aria-hidden="true">
          {% for _link in section_links %}
          <li>
            <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
          </li>
          {% endfor %}
        </ul>
        {% else %}
          <a class="{% if _section.class %}{{ _section.class }}{% else %} usa-nav-link {% endif %} {% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
            <span>{{ _section.text }}</span>
          </a>
        {% endif %}
      </li>
      {% endfor %}
    </ul>
    {% endif %}

    <div class="usa-nav-secondary">
      {% if site.search_site_handle  %}
        <form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get" class="usa-search usa-search-small js-search-form usa-sr-only">
          <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="&#x2713;" />
          </div>
          <input id="affiliate" name="affiliate" type="hidden" value="{{ site.search_site_handle }}" />
          <div role="search">
            <label for="query" class="usa-sr-only">Enter Search Term(s):</label>
            <input autocomplete="off" class="usagov-search-autocomplete" id="query" name="query" type="search" />
            <button type="submit" name="commit">
              <span class="usa-sr-only">Search</span>
            </button>
          </div>
        </form>
      {% endif %}
      <ul class="usa-unstyled-list usa-nav-secondary-links">
        {% if site.search_site_handle %}
        <li class="js-search-button-container">
          <button class="usa-header-search-button js-search-button">Search</button>
        </li>
        {% endif %}
        {% assign _link = site.download_report_button %}
        <li>
          <a
            href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | default: '/assets/docs/sample-document.pdf' | relative_url }}{% endif %}"
            class="{{ 'usa-button ' | append: _link.class }}"
            role="button"
          >
            {{ _link.text | default: 'Download report' }}
          </a>
        </li>
      </ul>
    </div>

  </div>
</nav>

</header> <div class=“usa-overlay”></div>