{% if header %}
<div class="usa-overlay"></div>
{% if header.type == 'basic' %}
<header class="usa-header usa-header--basic" role="banner">
{% elsif header.type == 'basic-mega' %}
<header class="usa-header usa-header--basic usa-header--basic-megamenu" role="banner">
{% elsif header.type == 'extended' or header.type == 'extended-mega' %}
<header class="usa-header usa-header--extended" role="banner">
{% endif %}
{% if header.type == 'basic' or header.type == 'basic-mega' %} <div class="usa-nav-container"> {% endif %} <div class="usa-navbar"> <div class="usa-logo" id="header-logo"> <a href="{% if header.href %}{{ header.href }}{% else %}{{ site.baseurl }}/{% endif %}" title="Home"> {% if header.logo %} <img class="usa-logo-img" src="{% if header.logo.external %}{{ header.logo.src }}{% else %}{{ header.logo.src | relative_url }}{% endif %}" alt="{{ header.logo.alt }}"> {% endif %} <em class="usa-logo__text"> {{ header.title | default: site.title }} </em> </a> </div> <button class="usa-menu-btn">Menu</button> </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 class="usa-nav__primary-item"> {% 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> {% if header.type == 'basic' or header.type == 'extended' %} <ul id="{{ _section_id }}" class="usa-nav__submenu"> {% endif %} {% if header.type == 'basic-mega' or header.type == 'extended-mega' %} <div id="{{ _section_id }}" class="usa-nav__submenu usa-megamenu"> <div class="grid-row grid-gap-4"> {% endif %} {% for _link in section_links %} {% if header.type == 'basic-mega' or header.type == 'extended-mega' %} <!-- wrap every 3 links in a usa-megamenu-col div --> {% capture modulo %}{{ forloop.index | modulo: 3 }}{% endcapture %} {% if modulo == '1' %} <div class="desktop:grid-col-3"> <ul class="usa-nav__submenu-list"> {% endif %} {% endif %} <li class="usa-nav__submenu-item"> <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a> </li> {% if header.type == 'basic-mega' or header.type == 'extended-mega' %} {% if modulo == '0' or forloop.last %} </ul> </div> {% endif %} {% endif %} {% endfor %} {% if header.type == 'basic' or header.type == 'extended' %} </ul> {% endif %} {% if header.type == 'basic-mega' or header.type == 'extended-mega' %} </div><!-- /grid-row --> </div> {% endif %} {% 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 %} {% if header.type == 'basic' or header.type == 'basic-mega' %} {% assign _secondary = header.secondary %} {% if site.search_site_handle %} {% include components/search.html %} {% endif %} {% endif %} {% if header.type == 'extended' or header.type == 'extended-mega' %} {% assign _secondary = header.secondary %} <div class="usa-nav__secondary"> <ul class="usa-unstyled-list usa-nav__secondary-links"> {% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %} {% for _link in secondary_links %} <li class="usa-nav__secondary-item"> <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}" {% if _link.class %} class="{{ _link.class }}" {% endif %}> {{ _link.text }} </a> </li> {% endfor %} </ul> {% 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"> <input name="utf8" type="hidden" value="✓" /> <input type="hidden" name="affiliate" id="affiliate" value="{{ site.search_site_handle }}" /> <div role="search"> <label for="query" class="usa-sr-only">Enter search terms</label> <input autocomplete="off" class="usa-input usagov-search-autocomplete" id="query" name="query" type="search" /> <button class="usa-button" type="submit" name="commit"> <span class="usa-sr-only">Search</span> </button> </div> </form> {% endif %} </div> {% endif %} </div> </div> </nav> {% if header.type == 'basic' or header.type == 'basic-mega' %} </div> {% endif %} </header>
{% endif %}