Basic header

Orient users to a simple site.

Basic header Demo Basic header 

<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">
        <em class="usa-logo__text"
          ><a href="/" title="<Project title>">&lt;Project title&gt;</a></em
        >
      </div>
      <button type="button" class="usa-menu-btn">Menu</button>
    </div>
    <nav aria-label="Primary navigation" class="usa-nav">
      <button type="button" class="usa-nav__close">
        <img src="/assets/img/usa-icons/close.svg" role="img" alt="Close" />
      </button>
      <ul class="usa-nav__primary usa-accordion">
        <li class="usa-nav__primary-item">
          <button
            type="button"
            class="usa-accordion__button usa-nav__link usa-current"
            aria-expanded="false"
            aria-controls="basic-nav-section-one"
          >
            <span>&lt;Current section&gt;</span>
          </button>
          <ul id="basic-nav-section-one" class="usa-nav__submenu">
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
          </ul>
        </li>
        <li class="usa-nav__primary-item">
          <button
            type="button"
            class="usa-accordion__button usa-nav__link"
            aria-expanded="false"
            aria-controls="basic-nav-section-two"
          >
            <span>&lt;Section&gt;</span>
          </button>
          <ul id="basic-nav-section-two" class="usa-nav__submenu">
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
            <li class="usa-nav__submenu-item">
              <a href="javascript:void(0);"
                ><span>&lt;Navigation link&gt;</span></a
              >
            </li>
          </ul>
        </li>
        <li class="usa-nav__primary-item">
          <a href="javascript:void(0);" class="usa-nav-link"
            ><span>&lt;Simple link&gt;</span></a
          >
        </li>
      </ul>
      <section aria-label="Search component">
        <form class="usa-search usa-search--small" role="search">
          <label class="usa-sr-only" for="search-field">Search</label>
          <input
            class="usa-input"
            id="search-field"
            type="search"
            name="search"
          />
          <button class="usa-button" type="submit">
            <img
              src="/assets/img/usa-icons-bg/search--white.svg"
              class="usa-search__submit-icon"
              alt="Search"
            />
          </button>
        </form>
      </section>
    </nav>
  </div>
</header>

Guidance

About

  • Use the basic header if you have few enough sections in your main navigation to fit comfortably next to your logo; this decision will depend on the length of your text and whether you include a search bar. You can customize the header (depending on your site structure) and use it with:
    • A text or image logo
    • With or without dropdown menus
    • With or without a search bar
    • With or without call-to-action buttons in place of the search bar

When to use the basic header

  • Limited sections. The basic header is great if you have a modest number of sections in your main navigation.
  • Shallow hierarchy. You may also use it if each main section listed in the horizontal navigation has six or fewer subsections that you’d like to include in a dropdown menu.

When to consider something else

  • Many sections or deep hierarchy. Consider using the extended header if you have more sections in your horizontal navigation than will fit comfortably next to your logo or if you have complex sections that require the use of a megamenu.

Package

  • Package usage: @forward "usa-header";
  • Dependencies: uswds-fonts, uswds-helpers, usa-skipnav, usa-search, usa-button, usa-nav, usa-accordion