<style scoped>
    header {
        margin-bottom: 14rem;
    }

    header~header {
        border-top: 1px dotted black;
    }
</style>

<header class="usa-header usa-header-basic" role="banner">
    <div class="usa-nav-container">
        <div class="usa-navbar">
            <div class="usa-logo" id="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 role="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>

                    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-one">
      <span>Section one</span>
    </button>
                    <ul id="basic-nav-section-one" class="usa-nav-submenu">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-two">
      <span>Section two</span>
    </button>
                    <ul id="basic-nav-section-two" class="usa-nav-submenu">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link three</span>
    </a>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link four</span>
    </a>

                </li>

            </ul>

            <div role="search" class="usa-search usa-search-small">
                <form class="">
                    <label class="usa-sr-only" for="search-field-small">Search small</label>
                    <input id="search-field-small" type="search" name="search">
                    <button type="submit">
      <span class="usa-sr-only">Search</span>
    </button>
                </form>
            </div>

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

<header class="usa-header usa-header-basic" role="banner">
    <div class="usa-nav-container">
        <div class="usa-navbar">
            <div class="usa-logo" id="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 role="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>

                    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-mega-nav-section-one">
      <span>Section one</span>
    </button>
                    <ul id="basic-mega-nav-section-one" class="usa-nav-submenu usa-megamenu usa-grid-full">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-mega-nav-section-two">
      <span>Section two</span>
    </button>
                    <ul id="basic-mega-nav-section-two" class="usa-nav-submenu usa-megamenu usa-grid-full">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link three</span>
    </a>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link four</span>
    </a>

                </li>

            </ul>

            <div role="search" class="usa-search usa-search-small">
                <form class="">
                    <label class="usa-sr-only" for="search-field-small">Search small</label>
                    <input id="search-field-small" type="search" name="search">
                    <button type="submit">
      <span class="usa-sr-only">Search</span>
    </button>
                </form>
            </div>

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

<header class="usa-header usa-header-extended" role="banner">
    <div class="usa-navbar">
        <div class="usa-logo" id="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 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="extended-nav-section-one">
      <span>Section one</span>
    </button>
                    <ul id="extended-nav-section-one" class="usa-nav-submenu">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="extended-nav-section-two">
      <span>Section two</span>
    </button>
                    <ul id="extended-nav-section-two" class="usa-nav-submenu">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link three</span>
    </a>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link four</span>
    </a>

                </li>

            </ul>

            <div class="usa-nav-secondary">

                <div role="search" class="usa-search usa-search-small">
                    <form class=" js-search-form">
                        <label class="usa-sr-only" for="search-field-small">Search small</label>
                        <input id="search-field-small" type="search" name="search">
                        <button type="submit">
      <span class="usa-sr-only">Search</span>
    </button>
                    </form>
                </div>

                <ul class="usa-unstyled-list usa-nav-secondary-links">

                    <li class="js-search-button-container">
                        <button class="usa-header-search-button js-search-button">Search</button>
                    </li>

                    <li>
                        <a href="">
        Link one
      </a>
                    </li>

                    <li>
                        <a href="">
        Link two
      </a>
                    </li>

                    <li>
                        <a href="">
        Link three
      </a>
                    </li>

                </ul>
            </div>

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

<header class="usa-header usa-header-extended" role="banner">
    <div class="usa-navbar">
        <div class="usa-logo" id="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 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="extended-mega-nav-section-one">
      <span>Section one</span>
    </button>
                    <ul id="extended-mega-nav-section-one" class="usa-nav-submenu usa-megamenu usa-grid-full">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="extended-mega-nav-section-two">
      <span>Section two</span>
    </button>
                    <ul id="extended-mega-nav-section-two" class="usa-nav-submenu usa-megamenu usa-grid-full">

                        <li>
                            <a href="#">Sub-link one</a>
                        </li>

                        <li>
                            <a href="#">Sub-link two</a>
                        </li>

                    </ul>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link three</span>
    </a>

                </li>

                <li>

                    <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link four</span>
    </a>

                </li>

            </ul>

            <div class="usa-nav-secondary">

                <div role="search" class="usa-search usa-search-small">
                    <form class=" js-search-form">
                        <label class="usa-sr-only" for="search-field-small">Search small</label>
                        <input id="search-field-small" type="search" name="search">
                        <button type="submit">
      <span class="usa-sr-only">Search</span>
    </button>
                    </form>
                </div>

                <ul class="usa-unstyled-list usa-nav-secondary-links">

                    <li class="js-search-button-container">
                        <button class="usa-header-search-button js-search-button">Search</button>
                    </li>

                    <li>
                        <a href="">
        Link one
      </a>
                    </li>

                    <li>
                        <a href="">
        Link two
      </a>
                    </li>

                    <li>
                        <a href="">
        Link three
      </a>
                    </li>

                </ul>
            </div>

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

There are no notes for this item.

<style scoped>
  header {
    margin-bottom: 14rem;
  }

  header ~ 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: uswds
  version: 1.3.0
uswds:
  path: ../../dist