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.

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"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 296 60"
          height="30"
          width="148"
          fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK">
          <title>GOV.UK</title>
          <g>
            <circle cx="20" cy="17.6" r="3.7" />
            <circle cx="10.2" cy="23.5" r="3.7" />
            <circle cx="3.7" cy="33.2" r="3.7" />
            <circle cx="31.7" cy="30.6" r="3.7" />
            <circle cx="43.3" cy="17.6" r="3.7" />
            <circle cx="53.2" cy="23.5" r="3.7" />
            <circle cx="59.7" cy="33.2" r="3.7" />
            <circle cx="31.7" cy="30.6" r="3.7" />
            <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
          </g>
          <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z" />
        </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`.
rebrand	boolean	If `true`, use the redesigned header and new GOV.UK logotype. Default is `false`.

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: "#"
}) }}

Brand note

See an example of the GOV.UK header showing the refreshed GOV.UK branding.

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.

Brand note

Brand refresh of the GOV.UK header component

From 25 June 2025, the GOV.UK header component will change to support a wider refresh of the GOV.UK brand.

The updated GOV.UK header component:

uses blue as the background colour, instead of black
uses a refreshed GOV.UK logo and wordmark lockup
adds 60px in height

To help service teams in government get ready, we’ve released GOV.UK Frontend v5.10.0.

Read the full release notes to see more details and how to update.

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"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 296 60"
          height="30"
          width="148"
          fill="currentcolor" class="govuk-header__logotype" aria-label="GOV.UK">
          <title>GOV.UK</title>
          <g>
            <circle cx="20" cy="17.6" r="3.7" />
            <circle cx="10.2" cy="23.5" r="3.7" />
            <circle cx="3.7" cy="33.2" r="3.7" />
            <circle cx="31.7" cy="30.6" r="3.7" />
            <circle cx="43.3" cy="17.6" r="3.7" />
            <circle cx="53.2" cy="23.5" r="3.7" />
            <circle cx="59.7" cy="33.2" r="3.7" />
            <circle cx="31.7" cy="30.6" r="3.7" />
            <path d="M33.1,9.8c.2-.1.3-.3.5-.5l4.6,2.4v-6.8l-4.6,1.5c-.1-.2-.3-.3-.5-.5l1.9-5.9h-6.7l1.9,5.9c-.2.1-.3.3-.5.5l-4.6-1.5v6.8l4.6-2.4c.1.2.3.3.5.5l-2.6,8c-.9,2.8,1.2,5.7,4.1,5.7h0c3,0,5.1-2.9,4.1-5.7l-2.6-8ZM37,37.9s-3.4,3.8-4.1,6.1c2.2,0,4.2-.5,6.4-2.8l-.7,8.5c-2-2.8-4.4-4.1-5.7-3.8.1,3.1.5,6.7,5.8,7.2,3.7.3,6.7-1.5,7-3.8.4-2.6-2-4.3-3.7-1.6-1.4-4.5,2.4-6.1,4.9-3.2-1.9-4.5-1.8-7.7,2.4-10.9,3,4,2.6,7.3-1.2,11.1,2.4-1.3,6.2,0,4,4.6-1.2-2.8-3.7-2.2-4.2.2-.3,1.7.7,3.7,3,4.2,1.9.3,4.7-.9,7-5.9-1.3,0-2.4.7-3.9,1.7l2.4-8c.6,2.3,1.4,3.7,2.2,4.5.6-1.6.5-2.8,0-5.3l5,1.8c-2.6,3.6-5.2,8.7-7.3,17.5-7.4-1.1-15.7-1.7-24.5-1.7h0c-8.8,0-17.1.6-24.5,1.7-2.1-8.9-4.7-13.9-7.3-17.5l5-1.8c-.5,2.5-.6,3.7,0,5.3.8-.8,1.6-2.3,2.2-4.5l2.4,8c-1.5-1-2.6-1.7-3.9-1.7,2.3,5,5.2,6.2,7,5.9,2.3-.4,3.3-2.4,3-4.2-.5-2.4-3-3.1-4.2-.2-2.2-4.6,1.6-6,4-4.6-3.7-3.7-4.2-7.1-1.2-11.1,4.2,3.2,4.3,6.4,2.4,10.9,2.5-2.8,6.3-1.3,4.9,3.2-1.8-2.7-4.1-1-3.7,1.6.3,2.3,3.3,4.1,7,3.8,5.4-.5,5.7-4.2,5.8-7.2-1.3-.2-3.7,1-5.7,3.8l-.7-8.5c2.2,2.3,4.2,2.7,6.4,2.8-.7-2.3-4.1-6.1-4.1-6.1h10.6,0Z" />
          </g>
          <path d="M88.6,33.2c0,1.8.2,3.4.6,5s1.2,3,2,4.4c1,1.2,2,2.2,3.4,3s3,1.2,5,1.2,3.4-.2,4.6-.8,2.2-1.4,3-2.2,1.2-1.8,1.6-3c.2-1,.4-2,.4-3v-.4h-10.6v-6.4h18.8v23h-7.4v-5c-.6.8-1.2,1.6-2,2.2-.8.6-1.6,1.2-2.6,1.8-1,.4-2,.8-3.2,1.2s-2.4.4-3.6.4c-3,0-5.8-.6-8-1.6-2.4-1.2-4.4-2.6-6-4.6s-2.8-4.2-3.6-6.8c-.6-2.8-1-5.6-1-8.6s.4-5.8,1.4-8.4,2.2-4.8,4-6.8,3.8-3.4,6.2-4.6c2.4-1.2,5.2-1.6,8.2-1.6s3.8.2,5.6.6c1.8.4,3.4,1.2,4.8,2s2.8,1.8,3.8,3c1.2,1.2,2,2.6,2.8,4l-7.4,4.2c-.4-.8-1-1.8-1.6-2.4-.6-.8-1.2-1.4-2-2s-1.6-1-2.6-1.4-2.2-.4-3.4-.4c-2,0-3.6.4-5,1.2-1.4.8-2.6,1.8-3.4,3-1,1.2-1.6,2.8-2,4.4-.6,1.6-.8,3.8-.8,5.4ZM161.4,24.6c-.8-2.6-2.2-4.8-4-6.8s-3.8-3.4-6.2-4.6c-2.4-1.2-5.2-1.6-8.4-1.6s-5.8.6-8.4,1.6c-2.2,1.2-4.4,2.8-6,4.6-1.8,2-3,4.2-4,6.8-.8,2.6-1.4,5.4-1.4,8.4s.4,5.8,1.4,8.4c.8,2.6,2.2,4.8,4,6.8s3.8,3.4,6.2,4.6c2.4,1.2,5.2,1.6,8.4,1.6s5.8-.6,8.4-1.6c2.4-1.2,4.6-2.6,6.2-4.6,1.8-2,3-4.2,4-6.8.8-2.6,1.4-5.4,1.4-8.4-.2-3-.6-5.8-1.6-8.4h0ZM154,33.2c0,2-.2,3.8-.8,5.4-.4,1.6-1.2,3.2-2.2,4.4s-2.2,2.2-3.4,2.8c-1.4.6-3,1-4.8,1s-3.4-.4-4.8-1-2.6-1.6-3.4-2.8c-1-1.2-1.6-2.6-2.2-4.4-.4-1.6-.8-3.4-.8-5.4v-.2c0-2,.2-3.8.8-5.4.4-1.6,1.2-3.2,2.2-4.4,1-1.2,2.2-2.2,3.4-2.8,1.4-.6,3-1,4.8-1s3.4.4,4.8,1,2.6,1.6,3.4,2.8c1,1.2,1.6,2.6,2.2,4.4.4,1.6.8,3.4.8,5.4v.2ZM177.8,54l-11.8-42h9.4l8,31.4h.2l8-31.4h9.4l-11.8,42h-11.4,0ZM235.4,46.7c1.2,0,2.4-.2,3.4-.6,1-.4,2-.8,2.8-1.6s1.4-1.6,1.8-2.8c.4-1.2.6-2.4.6-4V11.8h8.2v27.2c0,2.4-.4,4.4-1.2,6.2s-2,3.4-3.6,4.8c-1.4,1.4-3.2,2.4-5.4,3-2,.8-4.4,1-6.8,1s-4.8-.4-6.8-1c-2-.8-3.8-1.8-5.4-3-1.6-1.4-2.6-3-3.6-4.8-.8-1.8-1.2-4-1.2-6.2V11.7h8.4v26c0,1.6.2,2.8.6,4,.4,1.2,1,2,1.8,2.8s1.6,1.2,2.8,1.6c1.2.4,2.2.6,3.6.6h0ZM261.4,11.9h8.4v18.2l14.8-18.2h10.4l-14.4,16.8,15.4,25.2h-9.8l-11-18.8-5.4,6v12.8h-8.4V11.9h0ZM206.2,44.2c-3,0-5.4,2.4-5.4,5.4s2.4,5.4,5.4,5.4,5.4-2.4,5.4-5.4-2.4-5.4-5.4-5.4Z" />
        </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`.
rebrand	boolean	If `true`, use the redesigned header and new GOV.UK logotype. Default is `false`.

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.

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