All features

An example of the header component with all features enabled. See other variants.

Contents

<header class="dfe-header" role="banner">
  <div class="dfe-width-container dfe-header__container">
    <div class="dfe-header__logo">
      <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
      <img src="/assets/images/dfe-logo.png" class="dfe-logo" alt="DfE Homepage">
      <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover" alt="DfE Homepage">
      <span class="dfe-header__service-name">
      Service name
      </span>
      </a>
    </div>
    <div class="dfe-header__content" id="content-header">
      <ul class="dfe-header__action-links">
        <li>
          <a href="/" class="govuk-link govuk-link--inverse">My account</a>
        </li>
        <li>
          <a href="/" class="govuk-link govuk-link--inverse">Sign out</a>
        </li>
      </ul>
      <div class="dfe-header__menu">
        <button class="dfe-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
      </div>
      <div class="dfe-header__search">
        <button class="dfe-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
          <svg class="dfe-icon dfe-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
            <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
          </svg>
          <span class="govuk-visually-hidden">Search</span>
        </button>
        <div class="dfe-header__search-wrap" id="wrap-search">
          <form class="dfe-header__search-form" id="search" action="/search/" method="get" role="search">
            <label class="govuk-visually-hidden" for="searchterm">Search this website</label>
            <input class="dfe-search__input" id="searchterm" name="searchterm" type="search" placeholder="Search" autocomplete="off">
            <button class="dfe-search__submit" type="submit">
              <svg class="dfe-icon dfe-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="govuk-visually-hidden">Search</span>
            </button>
            <button class="dfe-search__close" id="close-search">
              <svg class="dfe-icon dfe-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
              </svg>
              <span class="govuk-visually-hidden">Close search</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <nav class="dfe-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
    <div class="dfe-width-container">
      <p class="dfe-header__navigation-title">
        <span id="label-navigation">Menu</span>
        <button class="dfe-header__navigation-close" id="close-menu">
          <svg class="dfe-icon dfe-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
            <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
          </svg>
          <span class="govuk-visually-hidden">Close menu</span>
        </button>
      </p>
      <ul class="dfe-header__navigation-list">
        <li class="dfe-header__navigation-item dfe-header__navigation-item--current">
          <a class="dfe-header__navigation-link" href="#">
            Navigation link 1 
            <svg class="dfe-icon dfe-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </a>
        </li>
        <li class="dfe-header__navigation-item ">
          <a class="dfe-header__navigation-link" href="#">
            Navigation link 2
            <svg class="dfe-icon dfe-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </a>
        </li>
        <li class="dfe-header__navigation-item ">
          <a class="dfe-header__navigation-link" href="#">
            Navigation link 3
            <svg class="dfe-icon dfe-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="34" height="34">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </nav>
</header>
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "showHeaderActionLinks": "true",
    "logoPath": "assets",
    "searchAction": "/search/",
    "searchInputName": "q",
    "service": {
      "name": "Service name"
    },
    "headerActionLinks": [
      {
        "url"  : "/",
        "label" : "My account"
      },
      {
        "url"  : "/",
        "label" : "Sign out"
      }
    ],
    "primaryLinks": [
        {
        "url"  : "#",
        "label" : "Navigation link 1"
      }, {
        "url"  : "#",
        "label" : "Navigation link 2"
      }, {
        "url"  : "#",
        "label" : "Navigation link 3"
      }
    ]
  })
}}

Variants

Service name only

Use this header for small services and sites which have fewer than 5 pages.

Contents

<header class="dfe-header" role="banner">
   <div class="dfe-width-container dfe-header__container">
      <div class="dfe-header__logo">
         <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
         <img src="/assets/images/dfe-logo.png" class="dfe-logo" alt="DfE Homepage">
         <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover" alt="DfE Homepage">
         <span class="dfe-header__service-name">
         Service name
         </span>
         </a>
      </div>
   </div>
</header>
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}

{{ header({
    "showNav": "false",
    "showSearch": "false",
    "showUserName": "false",
    "userName": "",
    "userNameURL": "",
    "logoPath": "assets",
    "service": {
      "name": "Service name"
    }
  })
}}

With search

Use this header if your service or website needs a search function.

You can specify the URL to post the search form to, by default it's /search.

Contents

Open example in a new window

<header class="dfe-header" role="banner">
   <div class="dfe-width-container dfe-header__container">
      <div class="dfe-header__logo">
         <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
         <img src="/assets/images/dfe-logo.png" class="dfe-logo" alt="DfE Homepage">
         <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover" alt="DfE Homepage">
         <span class="dfe-header__service-name">
         Service name
         </span>
         </a>
      </div>
      <div class="dfe-header__content" id="content-header">
         <div class="dfe-header__search">
            <button class="dfe-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
               <svg class="dfe-icon dfe-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                  <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
               </svg>
               <span class="govuk-visually-hidden">Search</span>
            </button>
            <div class="dfe-header__search-wrap" id="wrap-search">
               <form class="dfe-header__search-form" id="search" action="/search/" method="get" role="search">
                  <label class="govuk-visually-hidden" for="searchterm">Search this website</label>
                  <input class="dfe-search__input" id="searchterm" name="searchterm" type="search" placeholder="Search" autocomplete="off">
                  <button class="dfe-search__submit" type="submit">
                     <svg class="dfe-icon dfe-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                        <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
                     </svg>
                     <span class="govuk-visually-hidden">Search</span>
                  </button>
                  <button class="dfe-search__close" id="close-search">
                     <svg class="dfe-icon dfe-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                        <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
                     </svg>
                     <span class="govuk-visually-hidden">Close search</span>
                  </button>
               </form>
            </div>
         </div>
      </div>
   </div>
</header>
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}

{{ header({
    "showNav": "false",
    "showSearch": "true",
    "showUserName": "false",
    "userName": "",
    "userNameURL": "",
    "logoPath": "assets",
    "searchAction": "/search/",
    "searchInputName": "searchterm",
    "service": {
      "name": "Service name"
    }
  })
}}

With account option

Use this header if you want to have account options for accessing an account page or sign out of a service.

Contents

<header class="dfe-header" role="banner">
    <div class="dfe-width-container dfe-header__container">
      <div class="dfe-header__logo">
        <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
          <img src="/assets/images/dfe-logo.png" class="dfe-logo" alt="DfE Homepage">
          <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover" alt="DfE Homepage">
          <span class="dfe-header__service-name">
         Service name
         </span>
        </a>
      </div>
     <div class="dfe-header__content" id="content-header">
         <ul class="dfe-header__action-links">
            <li>
               Name
            </li>
            <li>
               <a href="/sign-out" class="govuk-link govuk-link--inverse">Sign out</a>
            </li>
         </ul>
      </div>
    </div>
  </header>
{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}

{{ header({
    "showNav": "false",
    "showSearch": "false",
    "showHeaderActionLinks": "true",
    "userNameURL": "#",
    "logoPath": "assets",
    "service": {
      "name": "Service name"
    },
    "headerActionLinks": [
      {
        "url"  : "",
        "label" : "Name"
      },
      {
        "url"  : "#",
        "label" : "Sign out"
      }
    ]
  })
}}