Guidance

You should follow the installation instructions before using this component.

If you're using Figma, there is a Figma library which contains the header for use in prototypes. We're working on bringing this up to date for version 2.

Do

  • use the header on internal, staff-facing sites
  • use the header on public beta sites that are going to be provided on a education.gov.uk domain when live
  • use the header on live sites that are provided on education.gov.uk
  • use the header on live sites that are provided on education.gov.uk

Don't

  • Don't use the header on live sites hosted on service.gov.uk
  • Don't use the DfE header if the site is on education.gov.uk for private beta testing, and will eventually be on service.gov.uk, use the GOV.UK header
  • Don't put tags or phase banners in the header - use the phase banner in the beforeContent layout section
  • Don't change the colours - they are the department brand colours and meet accessibility requirements
  • Don't change the placement or size of the logo - it meets Government Communication Service guidelines for government branding and logos
  • Don't change the position of the service name - this is styled to support different breakpoints and viewports

All features

Contents

Open example in a new window 

<header class="dfe-header" role="banner">
  <div class="govuk-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="govuk-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="govuk-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-frontend/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 %}

Properties

Details of the properties that you can configure when using the nunjucks version of this component.

Parameter Name Type Description
showNav Boolean Controls whether the navigation menu is displayed.
showSearch Boolean Controls whether the search functionality is displayed.
showUserName Boolean Controls whether the username or user-related information is displayed.
showHeaderActionLinks Boolean Controls whether the header action links are displayed.
logoPath String Specifies the path to the logo images used in the header.
logoAltText String Provides the alternative text for the logo images.
classes String Additional CSS classes that might be added to the header element.
attributes Object Additional HTML attributes for the header element, handled in a loop for each attribute-value pair.
homeHref String Specifies the href for the homepage link associated with the logo.
ariaLabel String Accessibility label for the logo link, providing a text alternative for screen readers if not set, defaults to "DfE homepage".
headerActionLinks Array An array of objects where each object contains `url` and `label` for action links in the header.
searchAction String Specifies the URL for the POST action on the search form.
searchInputName String Specifies the name attribute for the search input, defaulting to "search-field" if not provided.
service Object An object containing `serviceUrl` and the `name` of the service.
primaryLinks Array An array of objects for primary navigation links, where each object contains `url` and `label`.
selectedNav String A parameter used to mark the current navigation item as active. You can pass it an object set in a view, for example:

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.

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 on the Header - Component #2 project issue.