<button class="usa-nav__close"><img src="../../dist/img/close.svg" role="img" 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="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">A very long navigation link that goes onto two lines</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">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="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">A very long navigation link that goes onto two lines</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
</ul>
</div>
<div class="usa-col">
<ul class="usa-nav__submenu-list">
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">Navigation link</a>
</li>
<li class="usa-nav__submenu-item">
<a href="#" class="">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>
No notes defined.
<button class="usa-nav__close"><img src="{{ uswds.path }}/img/close.svg" role="img" 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 }}" class="{% if child.is_current %} usa-current{% endif %}"> {{ child.text }}</a>
</li>
{%- endif -%}
{%- endfor -%}
{%- else -%}
<div class="grid-row grid-gap-4">
{%- for group in link.links | batch(3) -%}
<div class="usa-col">
<ul class="usa-nav__submenu-list">
{%- for child in group -%}
<li class="usa-nav__submenu-item">
<a href="{{ child.href }}" class="{% if child.is_current %} usa-current{% endif %}">{{ 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.is_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: null
version: 2.1.0
uswds:
path: ../../dist
nav:
search: false
links:
- text: Current section
is_current: true
id: nav-section-one
links:
- text: Navigation link
href: '#'
- text: Navigation link
href: '#'
is_current: false
- 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: '#'
is_current: false
- 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)