<header class="usa-header usa-header-basic usa-header-basic-megamenu" role="banner">
    <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">
        Department of Web Design
      </a>
    </em>
            </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="../../dist/img/close.svg" alt="close">
</button>
                <ul class="usa-nav-primary usa-accordion">
                    <li><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-mega-nav-section-one">
      <span>Section title</span>
    </button>
                        <ul id="basic-mega-nav-section-one" class="usa-nav-submenu usa-megamenu usa-grid-full">
                            <div class="usa-megamenu-col">
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                            </div>
                            <div class="usa-megamenu-col">
                                <li>
                                    <a href="#">Subsection title longer</a>
                                </li>
                                <li>
                                    <a href="#">A very long page title that goes onto two lines</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                            </div>
                            <div class="usa-megamenu-col">
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                            </div>
                        </ul>
                    </li>
                    <li><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-mega-nav-section-two">
      <span>Simple terms</span>
    </button>
                        <ul id="basic-mega-nav-section-two" class="usa-nav-submenu usa-megamenu usa-grid-full">
                            <div class="usa-megamenu-col">
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                            </div>
                            <div class="usa-megamenu-col">
                                <li>
                                    <a href="#">Subsection title longer</a>
                                </li>
                                <li>
                                    <a href="#">A very long page title that goes onto two lines</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                            </div>
                            <div class="usa-megamenu-col">
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                                <li>
                                    <a href="#">Subsection title</a>
                                </li>
                            </div>
                        </ul>
                    </li>
                    <li><a class="usa-nav-link" href="javascript:void(0)">
      <span>Distinct from each other</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 id="basic-mega-search-field-small" type="search" name="search">
                        <button type="submit">
      <span class="usa-sr-only">Search</span>
    </button>
                </form>
                </div>

            </div>
        </nav>
    </div>
</header>
<div class="usa-overlay"></div>

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: 1.4.1
uswds:
  path: ../../dist
header:
  primary:
    search: true
    id_prefix: basic-mega-
    mega: true