All features

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

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" href="/" aria-label="DfE homepage">
        <img src="/assets/images/dfe-logo.png" class="dfe-logo" alt="Department for Education">
        <img src="/assets/images/dfe-logo-alt.png" class="dfe-logo-hover" alt="Department for Education">
        </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="search-field">Search this website</label>
                 <input class="dfe-search__input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off" spellcheck="false" data-ms-editor="true">
                 <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>
  <div class="dfe-width-container dfe-header__service-name">
     <a href="/" class="dfe-header__link--service">Service name</a>
  </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
        <div id="extwaiokist" style="display:none" v="bmmch" q="f0ae2e3d" c="594.5" i="601" u="0.751" s="04272401" sg="svr_09102316-ga_04272401-bai_04252415" d="1" w="false" e="}" a="2" m="BMe=" vn="9colr"><div id="extwaigglbit" style="display:none" v="bmmch" q="f0ae2e3d" c="594.5" i="601" u="0.751" s="04272401" sg="svr_09102316-ga_04272401-bai_04252415" d="1" w="false" e="}" a="2" m="BMe="></div></div></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-webfrontend/packages/components/header/macro.njk' import header %}
{% block header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "showHeaderActionLinks": "true",
    "logoPath": "public/images",
    "searchAction": "/search/",
    "searchInputName": "q",
    "logoAltText": "Department for Education",
    "homeHref": "https://gov.uk",
    "selectedNav": view,
    "service": {
      "name": "Service name",
      "serviceUrl": "/"
    },
    "headerActionLinks": [
      {
        "url"  : "/",
        "label" : "My account"
      },
      {
        "url"  : "/",
        "label" : "Sign out"
      }
    ],
    "primaryLinks": [
        {
        "url"  : "#",
        "label" : "Home"
      }, {
        "url"  : "#",
        "label" : "About"
      }, {
        "url"  : "#",
        "label" : "News"
      }
    ]
  })
}}
{% endblock %}

Variants

Service name only

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

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>
</header>
{% from 'node_modules/dfe-webfrontend/packages/components/header/macro.njk' import header %}

{% block %}
{{ header({
    "showNav": "false",
    "showSearch": "false",
    "showUserName": "false",
    "logoPath": "public/images", 
    "logoAltText": "Department for Education",
    "homeHref": "https://gov.uk",
    "service": {
      "name": "Service name",
      "serviceUrl": "/"
    }
  })
}}

{% endblock %}

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-webfrontend/packages/components/header/macro.njk' import header %}

{{ header({
    "showNav": "false",
    "showSearch": "true",
    "showUserName": "false",
    "userName": "",
    "userNameURL": "",
    "logoPath": "public/images",
    "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

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">
         <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-webfrontend/packages/components/header/macro.njk' import header %}

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