Skip to content
UGA Online Design System

Header

The <header> element 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.

University of Georgia 

<div class="ds-wrapper">
  <div class="cmp-university-header">
    <div class="obj-limit-width">
      <h2 class="cmp-university-header__title">
        <a href="https://uga.edu" class="cmp-university-header__link">
          <svg width="153" height="9" viewBox="0 0 153 9">
            <title>University of Georgia</title>
            <path
              class="cmp-university-header__logo"
              d="M117.2.3c-2.8 0-4.3 2-4.3 4a4 4 0 004.2 4 4 4 0 004.2-4 4 4 0 00-4-4zm2.2 4.3c0 2-.8 3-2 3-1.5 0-2.6-1.4-2.6-3.5 0-1.9 1-3 2.2-3 1.5 0 2.4 1.2 2.4 3.5zM80.7.3c-2.9 0-4.4 2-4.4 4a4 4 0 004.2 4 4 4 0 004.2-4c0-2.3-1.7-4-4-4zm2.1 4.3c0 2-.8 3.2-2 3.2-1.5 0-2.5-1.6-2.5-3.6S79 .9 80.4.9c1.5 0 2.4 1.4 2.4 3.7zM103.8 5v3h-.3c-.7.2-1.6.4-2.4.4-2.8 0-4.7-1.6-4.7-4 0-2.8 2.4-4.1 4.7-4.1 1 0 2.5.4 2.5.4v1.8S102.8 1 101 1c-1.1 0-2.2.7-2.6 2l-.2 1.2c0 2.5 1.5 3.4 3 3.4h.6l.2-.7V5.3c0-1-.7-1.3-.7-1.3h3s-.6.1-.6 1zM137.3 5v3h-.3c-.7.2-1.6.4-2.4.4-2.9 0-4.7-1.6-4.7-4 0-2.8 2.4-4.1 4.7-4.1 1 0 2.4.4 2.4.4v1.8s-.7-1.5-2.4-1.5c-1.1 0-2.2.7-2.6 2l-.2 1.2c0 2.5 1.5 3.4 2.9 3.4h.6c.2-.2.3-.4.3-.7V5.3c0-1-.7-1.3-.7-1.3h3s-.6.1-.6 1zM27.4.4c.4.2.3.8.1 1.3 0 .3-1.1 3-1.6 4.1l-1.5-4.1c-.1-.5-.1-.8.3-1.3h-3.1c.6.5.8.8 1.2 1.8l2.2 6h.8l2.4-6c.3-.7.8-1.5 1.3-1.8h-2.1zM35.4 7c-.4.5-1.4.4-1.5.4h-1c-.2-.2-.3-.4-.3-1V4.8h1c.8 0 1.4 0 1.6.4V3.4c-.2.4-.8.5-1.6.5h-1V1.4l.2-.1h1.4c.7 0 1 .1 1.3.4l.5 1V.3h-5.7c.1.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h6V6L35.3 7zM109.2 7.4h-1c-.2-.2-.3-.4-.3-1V4.8h1c.8 0 1.4 0 1.6.4V3.4c-.2.4-.8.5-1.6.5h-1V1.6c0-.4 0-.4.5-.4h1c.8 0 1.1.1 1.4.5.3.3.5.9.5.9V.4h-5.8c.2.2.7.6.7 1.8v4.2c0 1.5-.8 1.8-.8 1.8h6V6s-.3.7-.7 1.1c-.4.5-1.4.4-1.5.4zM142 8.2s-.7-.3-.7-1.8V2.2c0-1.2.4-1.6.6-1.8h-3c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3.2zM16.5 8.2s-.7-.3-.7-1.8V2.2c0-1.2.4-1.6.6-1.8h-2.1c.2.2.6.6.6 1.8v3.2l-4.2-5H8.8c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8H11s-.7-.3-.7-1.8V2.7l4.5 5.5h1.7zM55.6 8.2S55 8 55 6.4V2.2c0-1.2.5-1.6.7-1.8h-3c.2.2.7.6.7 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3zM20.7 8.2S20 8 20 6.4V2.2c0-1.2.5-1.6.6-1.8h-2.9c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3.1zM150.8 8.2c-.7-.4-.9-.8-1.2-1.8L147.4.5h-1l-2.4 6c-.3.6-.7 1.4-1.3 1.7h2.3c-.5-.2-.4-.8-.2-1.3l.3-.8h2.5l.3.9c.2.4.2.8-.2 1.2h3zm-5.3-3l1-2.4.8 2.4h-1.8zM49 3.4c-1-.5-1.4-.8-1.5-1.4 0-.6.4-1 1.2-1 1.1 0 1.7.6 2 1.3V.6c-.2 0-1.1-.3-2-.3-1.6 0-2.7 1-2.7 2.3 0 1.3 1 1.9 2.3 2.5.9.4 1.4.7 1.4 1.4s-.4 1.2-1.1 1.2c-1.3 0-2.2-1.2-2.5-2v2l1.1.5 1.2.1c1.7 0 3-.8 3-2.4 0-1.1-1-1.9-2.4-2.5zM89 8.2s-.7-.3-.7-1.8V4.8h.9c.9 0 1.4 0 1.6.4V3.4c-.2.4-.7.5-1.6.5h-1V1.5c0-.3 0-.3.5-.3h1.1c.7 0 1 .1 1.3.5.3.3.5.9.5.9V.4h-5.7c.1.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8H89zM61 1.6c0-.4 0-.4.4-.4h.4c.7 0 1 .1 1.3.5.3.3.5.9.5.9V.4h-6.9v2.2l.5-1c.3-.3.6-.4 1.3-.4h.4c.4 0 .4 0 .4.4v4.8c0 1.5-.7 1.8-.7 1.8h3.1S61 8 61 6.4V1.6zM6 4.8V2.2C6 1 5.7.6 5.6.4h2.2C7.5.6 7 1 7 2.2v2.5s.4 3.6-3 3.7c0 0-3.3.2-3.3-2.7V2.2C.7 1 .2.6 0 .4h3c-.2.2-.7.6-.7 1.8v3c0 2.4 1.9 2.4 1.9 2.4S6 7.9 6 4.8zM69.2.5s.9.4.5 1.2l-1.1 2.2-1.2-2.2c-.4-.7.3-1.2.3-1.2h-3.2s.6.3 1.2 1.3l1.7 3v1.6c0 1.5-.7 1.8-.7 1.8h3.1s-.7-.3-.7-1.8V4.7l1.4-2.8C71 1 72 .5 72 .5h-2.8zM42.1 2.7c0 .6-.2 1-.5 1.3-.3.2-.6.3-1.2.3h-.2V1.5v-.3l.6-.2c.6 0 1.3.5 1.3 1.7zm1.5 3.8l-1-2c.5-.1 1.3-.7 1.3-1.8v-.2A2 2 0 0043 1c-.5-.3-1-.5-2.2-.5h-3c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8H41s-.7-.3-.7-1.8V5h.2c.4 0 .6 0 .8.4l.3.6.7 1.3c.5.7.9 1 2.4 1h.4s-.5-.4-1.4-1.8zM126.4 2.7c0 .6-.2 1-.5 1.3-.2.2-.6.3-1.2.3h-.2V1.5v-.3l.6-.2c.6 0 1.3.5 1.3 1.7zm1.5 3.8l-1-2c.5-.1 1.3-.7 1.3-1.8v-.2a2 2 0 00-.8-1.6c-.5-.3-1-.5-2.2-.5h-3c.2.2.6.6.6 1.8v4.2c0 1.5-.7 1.8-.7 1.8h3.1s-.7-.3-.7-1.8V5h.2c.4 0 .6 0 .8.4l.3.6.7 1.3c.5.7.9 1 2.4 1h.4s-.5-.4-1.4-1.8zM152.2 7.5c0 .4-.3.7-.7.7a.7.7 0 01-.7-.7.7.7 0 011.4 0zm-1.3 0c0 .3.3.6.6.6s.5-.3.5-.6-.2-.5-.5-.5-.6.2-.6.5zm.5.4h-.2v-.7h.5l.1.2-.1.1v.2l.1.2h-.1v-.2H151.3v.2zm0-.4l.2-.1-.2-.1v.2z"
            ></path>
          </svg>
        </a>
      </h2>
    </div>
  </div>
  <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"
            aria-expanded="false"
            aria-controls="main-nav"
          >
            <svg
              viewBox="0 0 16 14"
              class="cmp-title-bar__menu-icon"
              aria-hidden="true"
            >
              <path d="M1,1 15,1 M1,7 15,7 M1,13 15,13"></path>
            </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" id="main-nav">
        <nav aria-label="Main">
          <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"></path>
              </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 cmp-subnav--collapsed"
                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>
</div>

Accessibility

Section titled “Accessibility”

The header component includes the following accessibility features:

  • The <header> element serves as the banner landmark, which screen readers use to identify the site header.
  • The main navigation uses a <nav> element with aria-label="Main" to distinguish it from other nav landmarks on the page.
  • The mobile menu toggle button uses aria-expanded (initially "false") and aria-controls to associate it with the menu panel. JavaScript should toggle aria-expanded to "true" when the menu opens.
  • The search toggle button includes visually hidden text (“Search”) so screen readers announce its purpose.
  • The search submit button includes visually hidden text (“Submit Search”).
  • Subnav toggle buttons use aria-labelledby to associate each submenu with its parent item.

When implementing the header, also consider:

  • Moving focus into the mobile menu when it opens and returning focus to the toggle button when it closes.
  • Implementing a focus trap within the open mobile menu so keyboard users don’t tab behind it into obscured content.
  • Adding a “Skip to main content” link as the first focusable element so keyboard users can bypass the navigation.