<style scoped>
.usa-header {
margin-bottom: 14rem;
}
.usa-header~.usa-header {
border-top: 1px dotted black;
}
</style>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo" id="basic-logo">
<em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Basic header</a></em>
</div>
<button class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<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="basic-nav-section-one"><span>Current section</span></button>
<ul id="basic-nav-section-one" class="usa-nav__submenu">
<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>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-nav-section-two"><span>Section</span></button>
<ul id="basic-nav-section-two" class="usa-nav__submenu">
<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>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
</li>
</ul>
<form class="usa-search usa-search--small " role="search">
<label class="usa-sr-only" for="basic-search-field-small">Search small</label>
<input class="usa-input" id="basic-search-field-small" type="search" name="search">
<button class="usa-button" type="submit">
<img src="../../dist/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button>
</form>
</nav>
</div>
</header>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--basic usa-header--megamenu">
<div class="usa-nav-container">
<div class="usa-navbar">
<div class="usa-logo" id="basic-mega-logo">
<em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Basic with mega-menu</a></em>
</div>
<button class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<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="basic-mega-nav-section-one"><span>Current section</span></button>
<div id="basic-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
<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>
</div>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-mega-nav-section-two"><span>Section</span></button>
<div id="basic-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
<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>
</div>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
</li>
</ul>
<form class="usa-search usa-search--small " role="search">
<label class="usa-sr-only" for="basic-mega-search-field-small">Search small</label>
<input class="usa-input" id="basic-mega-search-field-small" type="search" name="search">
<button class="usa-button" type="submit">
<img src="../../dist/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button>
</form>
</nav>
</div>
</header>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo" id="extended-logo">
<em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Extended header</a></em>
</div>
<button class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner"><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="extended-nav-section-one"><span>Current section</span></button>
<ul id="extended-nav-section-one" class="usa-nav__submenu">
<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>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two"><span>Section</span></button>
<ul id="extended-nav-section-two" class="usa-nav__submenu">
<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>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
</li>
</ul>
<div class="usa-nav__secondary">
<ul class="usa-nav__secondary-links">
<li class="usa-nav__secondary-item">
<a href="">Secondary link</a>
</li>
<li class="usa-nav__secondary-item">
<a href="">Another secondary link</a>
</li>
</ul>
<form class="usa-search usa-search--small " role="search">
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>
<input class="usa-input" id="extended-search-field-small" type="search" name="search">
<button class="usa-button" type="submit">
<img src="/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button>
</form>
</div>
</div>
</nav>
</header>
<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended">
<div class="usa-navbar">
<div class="usa-logo" id="extended-mega-logo">
<em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Extended header<br>with mega-menu</a></em>
</div>
<button class="usa-menu-btn">Menu</button>
</div>
<nav aria-label="Primary navigation" class="usa-nav">
<div class="usa-nav__inner"><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="extended-mega-nav-section-one"><span>Current section</span></button>
<div id="extended-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
<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>
</div>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-mega-nav-section-two"><span>Section</span></button>
<div id="extended-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
<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>
</div>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
</li>
</ul>
<div class="usa-nav__secondary">
<ul class="usa-nav__secondary-links">
<li class="usa-nav__secondary-item">
<a href="">Secondary link</a>
</li>
<li class="usa-nav__secondary-item">
<a href="">Another secondary link</a>
</li>
</ul>
<form class="usa-search usa-search--small " role="search">
<label class="usa-sr-only" for="extended-mega-search-field-small">Search small</label>
<input class="usa-input" id="extended-mega-search-field-small" type="search" name="search">
<button class="usa-button" type="submit">
<img src="/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button>
</form>
</div>
</div>
</nav>
</header>
No notes defined.
<style scoped>
.usa-header {
margin-bottom: 14rem;
}
.usa-header ~ .usa-header {
border-top: 1px dotted black;
}
</style>
{% render '@header--basic', {header: ({title: 'Basic header'})}, true %}
{% render '@header--basic-mega', {header: ({title: 'Basic with mega-menu'})}, true %}
{% render '@header--extended', {header: ({title: 'Extended header'})}, true %}
{% render '@header--extended-mega', {header: ({title: 'Extended header<br>with mega-menu'})}, true %}
package:
name: null
version: 2.1.0
uswds:
path: ../../dist