Skip to main content

Navigation - Header

Use the appropriate header at the top of every page to show users they are on an NHS service and help them get started in finding what they need.

Version 10

Header updated in August 2025

See updates to Header in version 10

WCAG 2.2: Make sure that users can successfully see all page content when interacting with a dropdown menu and find help links in a consistent place on each page.

Open this default header example in a new tab 
<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS digital service manual homepage">
          <title>NHS digital service manual homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__service-name">Digital service manual</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get">
        <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS digital service manual</label>
        <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
        <button class="nhsuk-header__search-submit" type="submit">
          <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
            <title>Search</title>
            <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
          </svg>

        </button>
      </form>
    </search>
  </div>
  <nav class="nhsuk-header__navigation" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS service standard</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Design system</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Content guide</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Accessibility</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Community and contribution</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>
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.

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.

Nunjucks arguments for default header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  logo: {
    href: "#",
    ariaLabel: "NHS digital service manual homepage"
  },
  service: {
    text: "Digital service manual",
    href: "#"
  },
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS digital service manual"
  },
  navigation: {
    items: [
      {
        text: "NHS service standard",
        href: "#"
      },
      {
        text: 'Design system',
        href: '#'
      },
      {
        text: 'Content guide',
        href: '#'
      },
      {
        text: 'Accessibility',
        href: '#'
      },
      {
        text: 'Community and contribution',
        href: '#'
      }
    ]
  }
}) }}

When to use the header

Use the header if your service is a national NHS service in England on the nhs.uk domain.

When not to use the header

Do not use the NHS logo alone if your service is hosted on another domain (not nhs.uk).

Use the organisational header instead.

For information about supplier and partnership branding, see the NHS identity guidelines.

How to use the header

The header is made up of 4 elements:

The elements you include depend on the nature of your service and your users' needs.

For example, transactional services (like Find your NHS number, on the NHS website) do not usually include navigation and search, just the logo and service name. This is less distracting for users in a transactional journey.

Information: WCAG 2.2

Do not make header elements, like the "More" dropdown menu, sticky to the top of the page by using position: fixed or any other method. In other words, avoid anything that makes the menu sit on top of page content.

This is to make sure it does not hide or obscure any content which has a focus applied. This complies with WCAG 2.2 success criterion 2.4.11 Focus not Obscured (W3C).

Information: WCAG 2.2

You can add a link to a "help" page in your service's header. If you do, the link must be positioned consistently in 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 (W3C).

NHS logo and service name

The NHS logo must always be used. Add a service name to help users understand they're not on the main NHS website.

Open this logo service name header example in a new tab 
<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="Manage patients homepage">
          <title>Manage patients homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__service-name">Manage patients</span>
      </a>
    </div>
  </div>
</header>
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.

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.

Nunjucks arguments for logo service name header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  logo: {
    href: "#",
    ariaLabel: "Manage patients homepage"
  },
  service: {
    text: "Manage patients",
    href: "#"
  }
}) }}

The header can include a search bar.

If your content or service is on the NHS website and you need help with search, the service manual team can put you in touch with the team that manages our search functionality.

If your service is on the nhs.uk domain but not part of the NHS website or is on another domain, you will have to arrange your own search functionality, if you need it.

Open this search header example in a new tab 
<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
        <title>NHS</title>
        <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
      </svg>

    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get">
        <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
        <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
        <button class="nhsuk-header__search-submit" type="submit">
          <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
            <title>Search</title>
            <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
          </svg>

        </button>
      </form>
    </search>
  </div>
</header>
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.

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.

Nunjucks arguments for search header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  search: {
    placeholder: "Search",
    visuallyHiddenLabel: "Search the NHS website"
  }
}) }}

Help users find what they need quickly by providing consistent navigation.

If your service is a linear end-to-end journey, you probably do not need navigation links. You can use the Complete multiple tasks pattern.

Place links to your most important top-level sections first. When there is not enough space to show all links, they will be moved into the "More" drop-down list.

You can highlight the section the user is currently in.

Open this navigation header example in a new tab 
<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
        <title>NHS</title>
        <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
      </svg>

    </div>
  </div>
  <nav class="nhsuk-header__navigation" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">NHS service standard</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Design system</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Content guide</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Accessibility</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Community and contribution</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>
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.

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.

Nunjucks arguments for navigation header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  navigation: {
    items: [
      {
        text: "NHS service standard",
        href: "#"
      },
      {
        text: 'Design system',
        href: '#',
        active: true
      },
      {
        text: 'Content guide',
        href: '#'
      },
      {
        text: 'Accessibility',
        href: '#'
      },
      {
        text: 'Community and contribution',
        href: '#'
      }
    ]
  }
}) }}

The header can include account information and links for logged-in users.

Open this account basic header example in a new tab 
<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="Manage patients homepage">
          <title>Manage patients homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__service-name">Manage patients</span>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
            <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
          </svg>
          Florence Nightingale
        </li>
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Log out
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>
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.

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.

Nunjucks arguments for account basic header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  logo: {
    href: "#",
    ariaLabel: "Manage patients homepage"
  },
  service: {
    text: "Manage patients",
    href: "#"
  },
  account: {
    items: [
      {
        text: "Florence Nightingale",
        icon: true
      },
      {
        text: "Log out",
        href: "#"
      }
    ]
  }
}) }}

When to use

Use the logged-in header on services when users have an account. The header can display a log out link and other account-related information and links.

It has been designed for staff systems. If you want to use it on a public-facing service, you must test it first and feed back your findings via the header issue in GitHub.

How to use

Account information and links can be used with the other header features, for example service name and search. However, keep the number of items in the header to a minimum.

When allowing users to log in to your service, make sure you have a visible service name, so that they know which system they are logging in to.

Using account information and links

You can add multiple items to the account information and links section, such as the logged-in user's name and role. Items can be links or just plain text information.

Keep the number of links to a minimum. If you have more than 3 account links, consider combining functions and putting them on a separate page. For example, an account settings page could include actions like change name, change role and reset password. Test with users so you know which combination of items best meets their needs.

If you use a log out link, put it last in the list, showing top right on desktop screens and last on small screens. If you put log out and other account actions on a separate page, show the log out link last.

User information

Consider whether you need to show the user information about the account they have logged in to. This may depend on whether they:

  • share a computer
  • have multiple accounts or roles

When showing the user their account, you can highlight this with the profile icon (on the icons page). Only show the icon next to 1 item. Test with users how best to display the user's account information, for example, whether to show their full name or their email address.

Header with complex account information and links

This example shows account information and multiple links, with a service name and navigation.

Open this account complex header example in a new tab 
<header class="nhsuk-header" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="Manage patients homepage">
          <title>Manage patients homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__service-name">Manage patients</span>
      </a>
    </div>
    <nav class="nhsuk-header__account" aria-label="Account">
      <ul class="nhsuk-header__account-list">
        <li class="nhsuk-header__account-item">
          <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
            <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z" />
          </svg>
          Florence Nightingale (Regional Manager)
        </li>
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Change role
          </a>
        </li>
        <li class="nhsuk-header__account-item">
          <a class="nhsuk-header__account-link" href="#">
            Log out
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <nav class="nhsuk-header__navigation" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Home</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Add new patient</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Find a patient</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>
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.

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.

Nunjucks arguments for account complex header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  logo: {
    href: "#",
    ariaLabel: "Manage patients homepage"
  },
  service: {
    text: "Manage patients",
    href: "#"
  },
  account: {
    items: [
      {
        text: "Florence Nightingale (Regional Manager)",
        icon: true
      },
      {
        text: "Change role",
        href: "#"
      },
      {
        text: "Log out",
        href: "#"
      }
    ]
  },
  navigation: {
    items: [
      {
        text: "Home",
        href: "#"
      },
      {
        text: "Add new patient",
        href: "#"
      },
      {
        text: "Find a patient",
        href: "#"
      }
    ]
  }
}) }}

Organisational header

Use the organisational header if your organisation or service is:

  • a regional or local NHS service, such as an NHS trust
  • not on an nhs.uk domain

There are 3 variants of the organisational header:

  • blue header
  • white header
  • white header with blue navigation

Blue header

Open this organisational header example in a new tab 
<header class="nhsuk-header nhsuk-header--organisation" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage">
          <title>NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__organisation-name">Anytown Anyplace <span class="nhsuk-header__organisation-name-split">Anywhere</span></span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get">
        <label class="nhsuk-u-visually-hidden" for="search-field">Search the Anytown Anyplace Anywhere website</label>
        <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
        <button class="nhsuk-header__search-submit" type="submit">
          <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
            <title>Search</title>
            <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
          </svg>

        </button>
      </form>
    </search>
  </div>
  <nav class="nhsuk-header__navigation" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Your hospital visit</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Wards and departments</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Conditions and treatments</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Our people</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Our research</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>
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.

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.

Nunjucks arguments for organisational header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  logo: {
    href: "#",
    ariaLabel: "NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage"
  },
  organisation: {
    name: "Anytown Anyplace",
    split: "Anywhere",
    descriptor: "NHS Foundation Trust"
  },
  search: {
    visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
  },
  navigation: {
    items: [
      {
        text: "Your hospital visit",
        href: "#"
      },
      {
        text: "Wards and departments",
        href: "#",
        active: true
      },
      {
        text: "Conditions and treatments",
        href: "#"
      },
      {
        text: "Our people",
        href: "#"
      },
      {
        text: "Our research",
        href: "#"
      }
    ]
  }
}) }}

White header

Open this organisational white header example in a new tab 
<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage">
          <title>NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__organisation-name">Anytown Anyplace <span class="nhsuk-header__organisation-name-split">Anywhere</span></span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get">
        <label class="nhsuk-u-visually-hidden" for="search-field">Search the Anytown Anyplace Anywhere website</label>
        <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
        <button class="nhsuk-header__search-submit" type="submit">
          <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
            <title>Search</title>
            <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
          </svg>

        </button>
      </form>
    </search>
  </div>
  <nav class="nhsuk-header__navigation nhsuk-header__navigation--white" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Your hospital visit</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Wards and departments</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Conditions and treatments</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Our people</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Our research</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>
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.

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.

Nunjucks arguments for organisational white header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  classes: "nhsuk-header--white",
  logo: {
    href: "#",
    ariaLabel: "NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage"
  },
  organisation: {
    name: "Anytown Anyplace",
    split: "Anywhere",
    descriptor: "NHS Foundation Trust"
  },
  search: {
    visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
  },
  navigation: {
    classes: "nhsuk-header__navigation--white",
    items: [
      {
        text: "Your hospital visit",
        href: "#"
      },
      {
        text: "Wards and departments",
        href: "#",
        active: true
      },
      {
        text: "Conditions and treatments",
        href: "#"
      },
      {
        text: "Our people",
        href: "#"
      },
      {
        text: "Our research",
        href: "#"
      }
    ]
  }
}) }}

White header with blue navigation

Open this organisational white with blue navigation header example in a new tab 
<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" role="banner" data-module="nhsuk-header">
  <div class="nhsuk-header__container nhsuk-width-container">
    <div class="nhsuk-header__service">
      <a class="nhsuk-header__service-logo" href="#">
        <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage">
          <title>NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage</title>
          <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
        </svg>
        <span class="nhsuk-header__organisation-name">Anytown Anyplace <span class="nhsuk-header__organisation-name-split">Anywhere</span></span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </a>
    </div>
    <search class="nhsuk-header__search">
      <form class="nhsuk-header__search-form" id="search" action="https://www.nhs.uk/search/" method="get">
        <label class="nhsuk-u-visually-hidden" for="search-field">Search the Anytown Anyplace Anywhere website</label>
        <input class="nhsuk-header__search-input nhsuk-input" id="search-field" name="q" type="search" placeholder="Search" autocomplete="off">
        <button class="nhsuk-header__search-submit" type="submit">
          <svg class="nhsuk-icon nhsuk-icon--search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" role="img" aria-label="Search">
            <title>Search</title>
            <path d="m20.7 19.3-4.1-4.1a7 7 0 1 0-1.4 1.4l4 4.1a1 1 0 0 0 1.5 0c.4-.4.4-1 0-1.4ZM6 11a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
          </svg>

        </button>
      </form>
    </search>
  </div>
  <nav class="nhsuk-header__navigation" aria-label="Menu">
    <div class="nhsuk-header__navigation-container nhsuk-width-container">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Your hospital visit</a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--current">
          <a class="nhsuk-header__navigation-link" href="#" aria-current="true"><strong class="nhsuk-header__navigation-item-current-fallback">Wards and departments</strong></a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Conditions and treatments</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Our people</a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="#">Our research</a>
        </li>
        <li class="nhsuk-header__menu" hidden>
          <button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false">
            <span class="nhsuk-u-visually-hidden">Browse </span>More
          </button>
        </li>
      </ul>
    </div>
  </nav>
</header>
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.

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.

Nunjucks arguments for organisational white with blue navigation header
Name Type Required Description
id string false The ID of the header.
logo object false Object containing options for the logo
logo{}.href string false The href of the link for the logo. If not set, and a service.href is set, or both are set to same value, then the logo and service name will be combined into a single link.
logo{}.src string false The path of the logo image, if you are not using the default NHS logo.
logo{}.ariaLabel string false The aria-label for the logo. Defaults to 'NHS homepage'
service object false Object containing options for the service name.
service{}.text string false The text to use for the service name.
service{}.href string false The href of the link for the service name.
organisation object false Settings for header with organisational logo.
organisation{}.name string false Organisation name.
organisation{}.split string false Longer organisation names can be split onto multiple lines.
organisation{}.descriptor string false Organisation descriptor.
navigation object false Object containing settings for the primary navigation.
navigation{}.items array false Array of navigation links for use in the header.
navigation{}.items[].href string true The href of a navigation item in the header.
navigation{}.items[].text string true If html is set, this is not required. Text for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].html string true If text is set, this is not required. HTML for the navigation item. If html is provided, the text argument will be ignored.
navigation{}.items[].current boolean false Set to true if this links to the current page being shown.
navigation{}.items[].active boolean false Set to true if the current page is within this section, but the link doesn't necessarily link to the current page
navigation{}.items[].classes string false Classes to add to the list item containing the link.
navigation{}.items[].attributes object false HTML attributes (for example data attributes) to add to the list item containing the link.
navigation{}.ariaLabel string false The aria-label for the primary navigation. Defaults to 'Menu'
navigation{}.classes string false Classes to add to the primary navigation.
navigation{}.attributes object false HTML attributes (for example data attributes) to add to the primary navigation.
search object false Object containing settings for a search box
search{}.action string false The search action endpoint. Defaults to 'https://www.nhs.uk/search'
search{}.name string false The name for the search field. Defaults to 'q'
search{}.placeholder string false The placeholder text for the search field. Defaults to 'Search'
search{}.visuallyHiddenLabel string false The label for the search field. Defaults to 'Search the NHS website'
search{}.visuallyHiddenButton string false The label for the visually hidden button. Defaults to 'Search'
account object false Object containing settings for the account section of the header.
account{}.items array false Array of account items for use in the header.
account{}.items[].href string false The href of an account item in the header.
account{}.items[].text string true If html is set, this is not required. Text for the account item. If html is provided, the text argument will be ignored.
account{}.items[].html string true If text is set, this is not required. HTML for the account item. If html is provided, the text argument will be ignored.
account{}.items[].icon boolean false Whether to include the account icon for the account item. Defaults to false.
account{}.items[].action string false If set, the item will become a button wrapped in a form with the action given. Useful for log out buttons.
account{}.items[].method string false The value to use for the method of the form if action is set. Defaults to 'post'
account{}.ariaLabel string false The aria-label for the account navigation. Defaults to 'Account'
account{}.classes string false Classes to add to the account navigation.
account{}.attributes object false HTML attributes (for example data attributes) to add to the account navigation.
baseUrl string false Base URL to prepend to the logo.src path.
containerClasses string false Classes to add to the header container, useful if you want to make the header fixed width.
classes string false Classes to add to the header container.
attributes object false HTML attributes (for example data attributes) to add to the header container. 
{% from 'header/macro.njk' import header %}

{{ header({
  classes: "nhsuk-header--white",
  logo: {
    href: "#",
    ariaLabel: "NHS Anytown Anyplace Anywhere NHS Foundation Trust homepage"
  },
  organisation: {
    name: "Anytown Anyplace",
    split: "Anywhere",
    descriptor: "NHS Foundation Trust"
  },
  search: {
    visuallyHiddenLabel: "Search the Anytown Anyplace Anywhere website"
  },
  navigation: {
    items: [
      {
        text: "Your hospital visit",
        href: "#"
      },
      {
        text: "Wards and departments",
        href: "#",
        active: true
      },
      {
        text: "Conditions and treatments",
        href: "#"
      },
      {
        text: "Our people",
        href: "#"
      },
      {
        text: "Our research",
        href: "#"
      }
    ]
  }
}) }}

You must have a Frutiger font licence to use an NHS organisational logo. Find out about using the Frutiger font, including registering for a free licence.

Organisational logos

Read more about creating NHS organisational logos in the NHS England identity guidelines.

The organisational logo is an SVG (scalable vector graphic) and you can change the organisation name and descriptor in the code. Longer organisation names should be split onto 2 lines.

You can also use a static asset, such as a PNG file.

<a class="nhsuk-header__service-logo" href="/">
  <img class="nhsuk-header__organisation-logo" src="/assets/logo.png" width="280" alt="Anyplace Anytown Anywhere NHS Foundation Trust homepage">
</a>

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feedback or share insights on GitHub

Read more about how to feedback or share insights.

If you have any questions, get in touch with the service manual team.

Updated: August 2025