Generic header

Use this generic version of the header to tell users they’re using a government service that’s not part of the GOV.UK website.

Open this example in a new tab: generic header
HTML
<div class="govuk-generic-header">
  <div class="govuk-generic-header__container govuk-width-container">
    <div class="govuk-generic-header__logo">
      <a href="#" class="govuk-generic-header__homepage-link">
        <svg width="28" height="30" viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <circle cx="13.5549" cy="4.21349" r="4.21349" />
          <circle cx="13.5549" cy="25.7865" r="4.21349" />
          <circle cx="22.8963" cy="9.6068" r="4.21349" />
          <circle cx="4.2135" cy="20.3932" r="4.21349" />
          <circle cx="22.8963" cy="20.3932" r="4.21349" />
          <circle cx="4.21351" cy="9.60674" r="4.21349" />
        </svg> Service name
      </a>
    </div>
  </div>
</div>
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
url string The URL of the logo link. Defaults to the root of the current web domain (“/”).
logoText string Required. If logoHtml is set, this is not required. Text content for the logo section of the Generic header.
logoHtml string Required. If logoText is set, this is not required. HTML content for the logo section of the Generic header.
containerClasses string Classes for the container. Useful if you want to make the Generic header fixed width.
classes string Classes to add to the Generic header container.
attributes object HTML attributes (for example, data attributes) to add to the Generic header container. 
{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}

{% set logoContent %}
<svg width="28" height="30" viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <circle cx="13.5549" cy="4.21349" r="4.21349"/>
  <circle cx="13.5549" cy="25.7865" r="4.21349"/>
  <circle cx="22.8963" cy="9.6068" r="4.21349"/>
  <circle cx="4.2135" cy="20.3932" r="4.21349"/>
  <circle cx="22.8963" cy="20.3932" r="4.21349"/>
  <circle cx="4.21351" cy="9.60674" r="4.21349"/>
</svg> Service name
{% endset %}

{{ govukGenericHeader({
  url: "#",
  logoHtml: logoContent
}) }}

When to use this component

Use the Generic header component if your service is both:

  • a public-facing government service
  • not on the GOV.UK website (meaning that your service is not part of the GOV.UK proposition)

This is to bring consistency and maintain user trust in journeys that move between the GOV.UK website and other government websites and services.

This component also helps ensure your non-GOV.UK service does not:

  • identify itself as being part of GOV.UK
  • use the crown or GOV.UK logotype in the header
  • use the GDS Transport typeface
  • use the GOV.UK brand colours

See the guidance on if your service is not on GOV.UK in the Service manual.

When not to use this component

If your service is hosted on one of these gov.uk domains, you must use the GOV.UK header component instead:

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

How it works

If you use the page template, you’ll first need to replace the default GOV.UK header in the page template with the Generic header component.

Use the Generic header component to display your own:

  • brand logo
  • homepage link
  • font for your service name (instead of GDS Transport)

You must also follow the steps in the Using GOV.UK Frontend without GOV.UK branding guidance to remove other GOV.UK brand elements elsewhere in your service.

Follow your organisation’s guidelines and best practice to show your brand logo.

To make your logo image as accessible and optimised as possible, also see:

By default, the Generic header component links to /, which is the top level of your service’s domain. You should customise the link to point to wherever makes the most sense for your service.

As with the GOV.UK header component, you should not use the Generic header component to show service name or navigation links. Use the Service navigation component instead.

Research on this component

When developing this component, we worked with a cross-government working group representing various government departments that work on services not hosted on GOV.UK.

We thank them for their work to gather the needs and considerations for consistent headers across all government services.

Help improve this component

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

Need help?

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