Header

Header

The <header> tag defines the header of a web page. It contains the logo, some actionable links, a keyword search, and a navigation. On large screens, the full navigation menu is displayed. On smaller screens, a menu button is displayed. When the menu button is clicked, the full navigation is shown. The menu can be closed by clicking outside of the menu, or by pressing the 'close' button.

View

HTML

<header class="cmp-header">
  <div class="cmp-header__title-bar">
    <div class="cmp-title-bar">
      <div class="cmp-site-title">
        <a href="/" class="cmp-site-title__link">
          <img src="/images/logo.svg" class="cmp-site-title__logo" alt="Online Learning" />
        </a>
      </div>

      <div class="cmp-title-bar__features">
        <button class="cmp-title-bar__menu-toggle js-menu-open">
          <svg viewBox="0 0 16 14" class="cmp-title-bar__menu-icon">
            <path d="M1,1 15,1 M1,7 15,7 M1,13 15,13" />
          </svg>
          Menu
        </button>
        <div class="cmp-title-bar__actions">
          <nav class="cmp-actions-nav">
            <a href="#" class="cmp-actions-nav__link">Request Info</a>
            <a href="#" class="cmp-actions-nav__link">Apply</a>
          </nav>
        </div>
        <button class="cmp-title-bar__search-toggle js-search-toggle" data-icon-hidden="icon-search" data-icon-expanded="icon-up-arrow">
          <span class="util-visually-hidden">Search</span>
        </button>
      </div>

      <div class="cmp-header-search js-search">
        <form class="cmp-header-search__form">
          <div class="cmp-header-search__form-container">
            <label class="util-visually-hidden" for="site-search">Search Online Learning</label>
            <div class="cmp-header-search__field-container">
              <input id="site-search" class="cmp-header-search__field js-search-field" type="search" placeholder="Search" />
            </div>
            <button class="cmp-header-search__button icon-search" type="submit">
              <span class="util-visually-hidden">
                Submit Search
              </span>
            </button>
          </div>
        </form>
      </div>
    </div>

    <div class="cmp-nav js-menu">
      <nav>
        <div class="cmp-nav__actions">
          <button class="cmp-nav__close js-menu-close">
            <svg class="cmp-nav__close-icon" viewBox="0 0 16 16">
              <path d="M1,1 15,15 M 1,15, 15,1" />
            </svg>
            Close
          </button>

          <a href="/" class="cmp-nav__title icon-shield">Online Learning</a>
        </div>

        <ul class="cmp-nav__list">
          <li class="cmp-nav__item">

            <a class="cmp-nav__link" href="/demos/future-students.html">
                Future Students
              </a>

          </li>
          <li class="cmp-nav__item">
            <div class="cmp-nav__subnav-actions">

              <a class="cmp-nav__link" href="/demos/degrees-and-certificates.html">
                Degrees &amp; Certificates
              </a>

              <button class="cmp-nav__toggle js-subnav" id="degrees-and-certs" data-icon-expanded="icon-up-arrow" data-icon-hidden="icon-down-arrow">
                <span class="util-visually-hidden">
                  Open Navigation
                </span>
              </button>

            </div>

            <ul class="cmp-subnav" aria-labelledby="degrees-and-certs">
              <li>
                <a href="#" class="cmp-subnav__link">Undergraduate Degrees</a>
              </li>
              <li>
                <a href="#" class="cmp-subnav__link">Graduate Degrees</a>
              </li>
              <li>
                <a href="#" class="cmp-subnav__link">Graduate Certificates</a>
              </li>
            </ul>
          </li>
          <li class="cmp-nav__item">

            <a class="cmp-nav__link" href="/demos/courses.html">
                Courses
              </a>

          </li>
          <li class="cmp-nav__item">

            <a class="cmp-nav__link" href="#">
                Student Resources
              </a>

          </li>
          <li class="cmp-nav__item">

            <a class="cmp-nav__link" href="#">
                Faculty Resources
              </a>

          </li>
          <li class="cmp-nav__item">

            <a class="cmp-nav__link" href="/demos/news-articles.html">
                News
              </a>

          </li>
          <li class="cmp-nav__item">

            <a class="cmp-nav__link" href="#">
                About
              </a>

          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>