Components

GOV.UK header

The GOV.UK header component tells users they’re using a service on GOV.UK and lets them use GOV.UK-wide tools. Also known as the GOV.UK masthead.

WCAG 2.2

New WCAG 2.2 criteria affect this component

To use the ‘GOV.UK header’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria:

make sure all page content can be seen when the user interacts with a dropdown menu
make sure help links can be found in a consistent place on each page

See the full list of components and patterns affected by WCAG 2.2.

HTML
Nunjucks

HTML

<header class="govuk-header" data-module="govuk-header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__logo">
      <a href="#" class="govuk-header__link govuk-header__link--homepage">
        <svg
          focusable="false"
          role="img"
          class="govuk-header__logotype"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 148 30"
          height="30"
          width="148"
          aria-label="GOV.UK">
          <title>GOV.UK</title>
          <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
        </svg>
      </a>
    </div>
  </div>
</header>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description. Deprecated options are marked as “Deprecated”.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name	Type	Description
homepageUrl	string	The URL of the homepage. Defaults to `"/"`.
productName	string	Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`.
serviceName	string	Deprecated in 5.9.0 The name of your service, included in the header.
serviceUrl	string	Deprecated in 5.9.0 URL for the service name anchor.
navigation	array	Deprecated in 5.9.0 Can be used to add navigation to the header component. See macro options for navigation.
navigationClasses	string	Deprecated in 5.9.0 Classes for the navigation section of the header.
navigationLabel	string	Deprecated in 5.9.0 Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
menuButtonLabel	string	Deprecated in 5.9.0 Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
menuButtonText	string	Deprecated in 5.9.0 Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to ‘Menu’.
containerClasses	string	Classes for the container, useful if you want to make the header fixed width.
classes	string	Classes to add to the header container.
attributes	object	HTML attributes (for example data attributes) to add to the header container.
useTudorCrown	boolean	Deprecated in 5.2.0 If `true`, uses the Tudor crown from King Charles III’s royal cypher. Otherwise, uses the St. Edward’s crown. Default is `true`.

Options for `navigation` array objects
Name	Type	Description
text	string	Deprecated in 5.9.0 Required. Text for the navigation item. If `html` is provided, the `text` option will be ignored.
html	string	Deprecated in 5.9.0 Required. HTML for the navigation item. If `html` is provided, the `text` option will be ignored.
href	string	Deprecated in 5.9.0 URL of the navigation item anchor.
active	boolean	Deprecated in 5.9.0 Flag to mark the navigation item as active or not.
attributes	object	Deprecated in 5.9.0 HTML attributes (for example data attributes) to add to the navigation item anchor.

{% from "govuk/components/header/macro.njk" import govukHeader %}

{{ govukHeader({
  homepageUrl: "#"
}) }}

If you use the page template, you’ll also get the GOV.UK header without having to add it, as it’s included by default. However, if you want to customise the default GOV.UK header, read the page template guidance about customising components.

When to use this component

If your service is being hosted on one of these domains, use the GOV.UK header component:

gov.uk/[myservice]
[myservice].service.gov.uk
[myblog].blog.gov.uk

You must use the GOV.UK header component at the top of every page. The Service Manual explains why it’s important for you to make your service look like GOV.UK.

When not to use this component

If your service is not hosted on one of the gov.uk domains outlined, you must not use the GOV.UK header component as it’s not considered part of GOV.UK.

You can still build from this component, but you’ll need to make some changes to make sure users do not confuse your website with GOV.UK.

How it works

Together, the GOV.UK header and Service navigation component both ensure users get a consistent experience on GOV.UK.

This also assures users that they’re in the right place to use your service and to understand that GOV.UK functions as one website.

For guidance on how to plan your header and navigation, see the Help users navigate a service pattern.

Default GOV.UK header

Most services on GOV.UK should use the default GOV.UK header.

It should only show the GOV.UK logo and any GOV.UK-wide links and tools to help your users. Do not add the menu of GOV.UK topic links to your service’s GOV.UK header.

HTML
Nunjucks

HTML

<header class="govuk-header" data-module="govuk-header">
  <div class="govuk-header__container govuk-width-container">
    <div class="govuk-header__logo">
      <a href="#" class="govuk-header__link govuk-header__link--homepage">
        <svg
          focusable="false"
          role="img"
          class="govuk-header__logotype"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 148 30"
          height="30"
          width="148"
          aria-label="GOV.UK">
          <title>GOV.UK</title>
          <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
        </svg>
      </a>
    </div>
  </div>
</header>

Nunjucks

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description. Deprecated options are marked as “Deprecated”.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name	Type	Description
homepageUrl	string	The URL of the homepage. Defaults to `"/"`.
productName	string	Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`.
serviceName	string	Deprecated in 5.9.0 The name of your service, included in the header.
serviceUrl	string	Deprecated in 5.9.0 URL for the service name anchor.
navigation	array	Deprecated in 5.9.0 Can be used to add navigation to the header component. See macro options for navigation.
navigationClasses	string	Deprecated in 5.9.0 Classes for the navigation section of the header.
navigationLabel	string	Deprecated in 5.9.0 Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
menuButtonLabel	string	Deprecated in 5.9.0 Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
menuButtonText	string	Deprecated in 5.9.0 Text of the button that opens the mobile navigation menu, if there is a mobile navigation menu. There is no enforced character limit, but there is a limited display space so keep text as short as possible. By default, this is set to ‘Menu’.
containerClasses	string	Classes for the container, useful if you want to make the header fixed width.
classes	string	Classes to add to the header container.
attributes	object	HTML attributes (for example data attributes) to add to the header container.
useTudorCrown	boolean	Deprecated in 5.2.0 If `true`, uses the Tudor crown from King Charles III’s royal cypher. Otherwise, uses the St. Edward’s crown. Default is `true`.

Options for `navigation` array objects
Name	Type	Description
text	string	Deprecated in 5.9.0 Required. Text for the navigation item. If `html` is provided, the `text` option will be ignored.
html	string	Deprecated in 5.9.0 Required. HTML for the navigation item. If `html` is provided, the `text` option will be ignored.
href	string	Deprecated in 5.9.0 URL of the navigation item anchor.
active	boolean	Deprecated in 5.9.0 Flag to mark the navigation item as active or not.
attributes	object	Deprecated in 5.9.0 HTML attributes (for example data attributes) to add to the navigation item anchor.

{% from "govuk/components/header/macro.njk" import govukHeader %}

{{ govukHeader({
  homepageUrl: "#"
}) }}

Previous variants of the GOV.UK header

The GOV.UK header component was originally released with 2 variants:

with service name
with service name and navigation

These 2 variants will be removed from the GOV.UK header component in the next breaking release of GOV.UK Frontend.

In August 2024, we introduced a separate Service navigation component. This is to better help users understand that they’re using your service and let them navigate around your service.

We recommend using the Service navigation component to show your service name and navigation links instead of the GOV.UK header, and to start updating existing services.

See the Help users navigate a service pattern for more guidance.

GOV.UK header with service name

We’ve deprecated the GOV.UK header with service name and will remove this option in the next breaking release of GOV.UK Frontend.

Use the Service navigation component to show your service name instead. We recommend teams to start updating existing services.

GOV.UK header with navigation

We’ve deprecated the GOV.UK header with navigation and will remove this option in the next breaking release of GOV.UK Frontend.

Use the Service navigation component to add navigation links instead.

WCAG 2.2

Do not make header elements, like dropdown menus, ‘sticky’ to the top of the page by using `position: fixed` or any other method. In other words, avoid any implementations that cause menus to sit on top of page content.

This is to make sure elements do not hide or obscure any content which has a focus applied and comply with WCAG 2.2 success criterion 2.4.11 Focus not obscured (minimum).

In November 2021, the GOV.UK homepage introduced a menu bar that avoids obscuring content by shifting the page down.

WCAG 2.2

You can add a link to a ‘help’ page in your service’s GOV.UK header component. If you do, the link must be positioned consistently within the header, and must always link to the same place.

For example, a header link to “Get help with this service” must go to the same place as similar header links elsewhere in your service. This is to comply with WCAG 2.2 success criterion 3.2.6 Consistent help.

GOV.UK One Login maintains their own header on the Let users navigate to their GOV.UK One Login and sign out easily page.

Research on this component

See the research section in the Help users navigate a service pattern for a summary of our research on the GOV.UK header and navigation, and how you can share your feedback with us.

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

take part in the ‘GOV.UK header’ discussion on GitHub and share your research
propose a change on GitHub – read more about how to propose changes in GitHub

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.

Cookies on GOV.UK Design System

GOV.UK header

New WCAG 2.2 criteria affect this component

When to use this component

When not to use this component

How it works

Default GOV.UK header

Previous variants of the GOV.UK header

GOV.UK header with service name

GOV.UK header with navigation

GOV.UK header with One Login

Research on this component

Help improve this component

Need help?