You must use this header if the service is hosted on education.gov.uk.

If you beleive your service should have a different header, speak to Andy Jones (Head of Design).

The blue Department for Education branded header shows users that they are on a DfE website and what service they are using.

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 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"
      }
    ]
  })
}}

When to use this component

You must use this blue DfE header at the top of every page, if your service is being hosted on education.gov.uk.

When not to use this component

You must not use the blue DfE header if your service is hosted on any of these domains:

  • gov.uk/myservice
  • myservice.service.gov.uk
  • blog.gov.uk

You should use the GOV.UK header instead.

How it works

To use this component install DfE Frontend into your project using the NPM package or compiled CSS and Javascript.

Settings for the Nunjucks macro

The header Nunjucks macro takes the following arguments:
Name Type Required Description
showNav boolean Yes Set to "true" to show the navigation links in the header.
showSearch boolean Yes Set to "true" to show the site search input form.
showHeaderActionLinks boolean Yes Set to "true" to show list if items in the top right of page.
homeHref string No The href of the link for the logo and mobile home link in the navigation links. Defaults to "/".
ariaLabel string No Aria label for the logo href. Defaults to "DfE homepage".
logoPath string Yes Set this to the local path for images. In version 13 of the prototype kit, set this is 'public/images'.
selectedNav string No Pass in a value from the view which matches the primaryLinks.label and it will add the class dfe-header__navigation-item--current to the corresponding nav item.
headerActionLinks array No Array of links for use in the header on the top right.
headerActionLinks[].url string No The href of a navigation item in the header. If blank, it will just display the label
headerActionLinks[].label string No The label of the item in the header.
primaryLinks array No Array of navigation links for use in the header.
primaryLinks[].url string No The href of a navigation item in the header.
primaryLinks[].label string No The label of a navigation item in the header.
service object No Object containing the *name* of the service.
attributes object No Any extra HTML attributes (for example data attributes) to add to the header container.
searchAction string No The search action endpoint. Defaults to "/search".
searchInputName string No The name for the search field. Defaults to "searchterm".

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-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

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-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"
      }
    ]
  })
}}

Using phase banners with the header

The GOV.UK phase banner component helps you tell users that the page they are on might be an alpha or beta page, and therefore, being tested.

If you are using the GOV.UK page template, add phase banners in the beforeContent layout section in the same way as you would with the GOV.UK header component.

This will ensure the phase banner is displayed immediately after the header and before any of the main content.

Things not to do

If you need to extend or make changes to the header component in your service, contribute and discuss the change with the Design Ops team or the Components and Patterns working group.

Do not:

  • put tags or phase banners in the header - use the phase banner in the beforeContent layout section
  • change the colours - they are the department brand colours and meet accessibility requirements
  • change the placement or size of the logo - it meets Government Communication guidelines for logos and branding
  • change the position of the service name - this is styled to support different breakpoints and viewports and will move to below the logo when required to

Services using this component

The following services are using this component:

Help us improve this component

To improve this component based on user needs and research, you can contribute in the following ways:

Contribute to this page on GitHub

Changes to this page
  1. Fixed styles for links so hover and active states are correct. See GitHub issue #91
    25 July 2023
  2. Fixed typo on page See GitHub issue #75
    18 July 2023
  3. Added guidance for using phase banners with the header. See GitHub issue #67
    13 June 2023