NJ Web Design System (v1.0.0)

Headers: Extended 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">Project title</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>

No notes defined.

<div class="usa-overlay"></div>
<header class="usa-header usa-header--extended">
  {%- render '@site-title', {header: header}, true -%}
  <nav aria-label="Primary navigation" class="usa-nav">
    <div class="usa-nav__inner">
      {%- render '@nav-primary', {nav: header.primary}, true -%}
      {%- render '@nav-secondary', {nav: header.secondary, id_prefix: header.primary.id_prefix}, true -%}
    </div>
  </nav>
</header>
 
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist
header:
  primary:
    search: false
    id_prefix: extended-
  secondary:
    search: true
    id_prefix: extended-