<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">Project title</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" 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="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">A very long navigation link that goes onto two lines</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">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="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">A very long navigation link that goes onto two lines</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="usa-col">
                                <ul class="usa-nav__submenu-list">
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">Navigation link</a>
                                    </li>
                                    <li class="usa-nav__submenu-item">
                                        <a href="#">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 ">
                <div 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"><span class="usa-sr-only">Search</span></button>
                </div>
            </form>
        </nav>
    </div>
</header>

There are no notes for this item.

{#
  This template is exactly the same as the basic header;
  the only difference is that it gets header.primary.mega == true
#}
{% render '@header--basic', {header: header}, true %}
package:
  name: uswds
  version: 2.2.1
uswds:
  path: ../../dist
header:
  primary:
    search: true
    id_prefix: basic-mega-
    mega: true