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.

WCAG 2.2

WCAG 2.2 affects this component

To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:

See the full list of design system changes to meet WCAG 2.2.

Open this top of page header example in new window
Copy top of page header code 
<header class="nhsuk-header" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">

        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

      </a>
    </div>

    <div class="nhsuk-header__content" id="content-header">
      <div class="nhsuk-header__search">
        <div class="nhsuk-header__search-wrap" id="wrap-search">
          <form class="nhsuk-header__search-form" id="search" action=" " method="get" role="search">
            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
            <button class="nhsuk-search__submit" type="submit">
              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="nhsuk-u-visually-hidden">Search</span>
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
  <div class="nhsuk-navigation-container">
    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions">
            Health A-Z
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/live-well/">
            Live Well
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/mental-health/">
            Mental health
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions/social-care-and-support/">
            Care and support
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/pregnancy/">
            Pregnancy
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/nhs-services/">
            NHS services
          </a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
          <a class="nhsuk-header__navigation-link" href="/">
            Home
          </a>
        </li>
        <li class="nhsuk-mobile-menu-container">
          <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
            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>

</header>
Close top of page header code
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 top of page header
Name Type Required Description
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy top of page header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "searchAction": " ",
    "primaryLinks": [
      {
        "url"  : "https://www.nhs.uk/conditions",
        "label" : "Health A-Z"
      },
      {
        'url' : 'https://www.nhs.uk/live-well/',
        'label' : 'Live Well'
      },
      {
        'url' : 'https://www.nhs.uk/mental-health/',
        'label' : 'Mental health'
      },
      {
        'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
        'label' : 'Care and support'
      },
      {
        'url'  : 'https://www.nhs.uk/pregnancy/',
        'label' : 'Pregnancy'
      },
      {
        'url' : 'https://www.nhs.uk/nhs-services/',
        'label' : 'NHS services'
      }
    ]
  })
}}
Close top of page header code

NHS header

When to use the NHS header

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

When not to use the NHS header

Do not use the NHS header 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 NHS header

The NHS header is made up of 3 elements:

  • the NHS logo, which may be accompanied by the service name
  • navigation, with exposed links and a drop-down "More" button
  • a search bar

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).

The NHS 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 contract.

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.

Examples

NHS default header

The NHS website has the default header with logo, navigation links and search.

Open this default header example in new window
Copy default header code 
<header class="nhsuk-header" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">

        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

      </a>
    </div>

    <div class="nhsuk-header__content" id="content-header">
      <div class="nhsuk-header__search">
        <div class="nhsuk-header__search-wrap" id="wrap-search">
          <form class="nhsuk-header__search-form" id="search" action=" " method="get" role="search">
            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
            <button class="nhsuk-search__submit" type="submit">
              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="nhsuk-u-visually-hidden">Search</span>
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
  <div class="nhsuk-navigation-container">
    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
      <ul class="nhsuk-header__navigation-list">
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions">
            Health A-Z
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/live-well/">
            Live Well
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/mental-health/">
            Mental health
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions/social-care-and-support/">
            Care and support
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/pregnancy/">
            Pregnancy
          </a>
        </li>
        <li class="nhsuk-header__navigation-item">
          <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/nhs-services/">
            NHS services
          </a>
        </li>
        <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
          <a class="nhsuk-header__navigation-link" href="/">
            Home
          </a>
        </li>
        <li class="nhsuk-mobile-menu-container">
          <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
            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>

</header>
Close default header code
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
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy default header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "searchAction": " ",
    "primaryLinks": [
      {
        "url"  : "https://www.nhs.uk/conditions",
        "label" : "Health A-Z"
      },
      {
        'url' : 'https://www.nhs.uk/live-well/',
        'label' : 'Live Well'
      },
      {
        'url' : 'https://www.nhs.uk/mental-health/',
        'label' : 'Mental health'
      },
      {
        'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
        'label' : 'Care and support'
      },
      {
        'url'  : 'https://www.nhs.uk/pregnancy/',
        'label' : 'Pregnancy'
      },
      {
        'url' : 'https://www.nhs.uk/nhs-services/',
        'label' : 'NHS services'
      }
    ]
  })
}}
Close default header code
NHS header with service name

The NHS digital service manual includes the logo, service name, navigation links and search.

Open this service header example in new window
Copy service header code 
<header class="nhsuk-header" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo"><a class="nhsuk-header__link nhsuk-header__link--service " href="/" aria-label="NHS homepage">

        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

        <span class="nhsuk-header__service-name">
          Digital service manual
        </span>
      </a>
    </div>

    <div class="nhsuk-header__content" id="content-header">
      <div class="nhsuk-header__search">
        <div class="nhsuk-header__search-wrap" id="wrap-search">
          <form class="nhsuk-header__search-form" id="search" action=" " method="get" role="search">
            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
            <button class="nhsuk-search__submit" type="submit">
              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="nhsuk-u-visually-hidden">Search</span>
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
  <div class="nhsuk-navigation-container">
    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
      <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__navigation-item nhsuk-header__navigation-item--home">
          <a class="nhsuk-header__navigation-link" href="/">
            Home
          </a>
        </li>
        <li class="nhsuk-mobile-menu-container">
          <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
            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>

</header>
Close service header code
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 service header
Name Type Required Description
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy service header code 
{% from 'header/macro.njk' import header %}

{{ header({
  "service": {
    "name": "Digital service manual"
  },
  "showNav": "true",
  "showSearch": "true",
  "searchAction": " ",
  "primaryLinks": [
      {
        "url"  : "#",
        "label" : "NHS service standard"
      },
      {
        'url' : '#',
        'label' : 'Design system'
      },
      {
        'url'  : '#',
        'label' : 'Content guide'
      },
      {
        'url'  : '#',
        'label' : 'Accessibility'
      },
      {
        'url' : '#',
        'label' : 'Community and contribution'
      }
    ]
  })
}}
Close service header code
NHS transactional service header

Find your NHS number (on the NHS website) is a transactional service and includes the logo and service name only.

Open this transactional header example in new window
Copy transactional header code 
<header class="nhsuk-header nhsuk-header__transactional" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo nhsuk-header__transactional--logo"><a class="nhsuk-header__link" href="/" aria-label="NHS homepage">

        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

      </a>
    </div>
    <div class="nhsuk-header__transactional-service-name">
      <a class="nhsuk-header__transactional-service-name--link" href="https://www.nhs.uk/nhs-services/online-services/find-nhs-number/">Find your NHS number</a>
    </div>

  </div>

</header>
Close transactional header code
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 transactional header
Name Type Required Description
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy transactional header code 
{% from 'header/macro.njk' import header %}

{{ header({
  "transactionalService": {
      "name": "Find your NHS number",
      "href": "https://www.nhs.uk/nhs-services/online-services/find-nhs-number/"
    },
    "showNav": "false",
    "showSearch": "false"
  })
}}
Close transactional header code

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 background
  • white background with blue nav
  • white background with white nav

Blue background organisational header

Open this organisational header example in new window
Copy organisational header code 
<header class="nhsuk-header nhsuk-header--organisation" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo">
      <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

        <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
        <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
      </a>
    </div>

    <div class="nhsuk-header__content" id="content-header">
      <div class="nhsuk-header__search">
        <div class="nhsuk-header__search-wrap" id="wrap-search">
          <form class="nhsuk-header__search-form" id="search" action=" " method="get" role="search">
            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
            <button class="nhsuk-search__submit" type="submit">
              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="nhsuk-u-visually-hidden">Search</span>
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
  <div class="nhsuk-navigation-container">
    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
      <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">
          <a class="nhsuk-header__navigation-link" href="#">
            Wards and departments
          </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__navigation-item nhsuk-header__navigation-item--home">
          <a class="nhsuk-header__navigation-link" href="/">
            Home
          </a>
        </li>
        <li class="nhsuk-mobile-menu-container">
          <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
            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>

</header>
Close organisational header code
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
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy organisational header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "searchAction": " ",
    "organisation": {
      "name": "Anytown Anyplace",
      "split": "Anywhere",
      "descriptor": "NHS Foundation Trust"
    },
    "primaryLinks": [
      {
        "url"  : "#",
        "label" : "Your hospital visit"
      },
      {
        'url' : '#',
        'label' : 'Wards and departments'
      },
      {
        'url'  : '#',
        'label' : 'Conditions and treatments'
      },
      {
        'url'  : '#',
        'label' : 'Our people'
      },
      {
        'url' : '#',
        'label' : 'Our research'
      }
    ]
  })
}}
Close organisational header code

White background organisational header with blue nav

Open this organisational white header example in new window
Copy organisational white header code 
<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo">
      <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

        <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
        <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
      </a>
    </div>

    <div class="nhsuk-header__content" id="content-header">
      <div class="nhsuk-header__search">
        <div class="nhsuk-header__search-wrap" id="wrap-search">
          <form class="nhsuk-header__search-form" id="search" action=" " method="get" role="search">
            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
            <button class="nhsuk-search__submit" type="submit">
              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="nhsuk-u-visually-hidden">Search</span>
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
  <div class="nhsuk-navigation-container">
    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
      <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">
          <a class="nhsuk-header__navigation-link" href="#">
            Wards and departments
          </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__navigation-item nhsuk-header__navigation-item--home">
          <a class="nhsuk-header__navigation-link" href="/">
            Home
          </a>
        </li>
        <li class="nhsuk-mobile-menu-container">
          <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
            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>

</header>
Close organisational white header code
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
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy organisational white header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "searchAction": " ",
    "classes": "nhsuk-header--white",
    "organisation": {
      "name": "Anytown Anyplace",
      "split": "Anywhere",
      "descriptor": "NHS Foundation Trust"
    },
    "primaryLinks": [
      {
        "url"  : "#",
        "label" : "Your hospital visit"
      },
      {
        'url' : '#',
        'label' : 'Wards and departments'
      },
      {
        'url'  : '#',
        'label' : 'Conditions and treatments'
      },
      {
        'url'  : '#',
        'label' : 'Our people'
      },
      {
        'url' : '#',
        'label' : 'Our research'
      }
    ]
  })
}}
Close organisational white header code

White background organisational header with white nav

Open this organisational white with nav header example in new window
Copy organisational white with nav header code 
<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white nhsuk-header--white-nav" role="banner">

  <div class="nhsuk-header__container">
    <div class="nhsuk-header__logo">
      <a class="nhsuk-header__link" href="/" aria-label="Anytown Anyplace Anywhere NHS Foundation Trust homepage">
        <svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100">
          <path class="nhsuk-logo__background" fill="#005eb8" d="M0 0h40v16H0z"></path>
          <path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
        </svg>

        <span class="nhsuk-organisation-name">Anytown Anyplace <span class="nhsuk-organisation-name-split">Anywhere</span></span>
        <span class="nhsuk-organisation-descriptor">NHS Foundation Trust</span>
      </a>
    </div>

    <div class="nhsuk-header__content" id="content-header">
      <div class="nhsuk-header__search">
        <div class="nhsuk-header__search-wrap" id="wrap-search">
          <form class="nhsuk-header__search-form" id="search" action=" " method="get" role="search">
            <label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
            <input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
            <button class="nhsuk-search__submit" type="submit">
              <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
              </svg>
              <span class="nhsuk-u-visually-hidden">Search</span>
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
  <div class="nhsuk-navigation-container">
    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
      <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">
          <a class="nhsuk-header__navigation-link" href="#">
            Wards and departments
          </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__navigation-item nhsuk-header__navigation-item--home">
          <a class="nhsuk-header__navigation-link" href="/">
            Home
          </a>
        </li>
        <li class="nhsuk-mobile-menu-container">
          <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
            <svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>

</header>
Close organisational white with nav header code
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 nav header
Name Type Required Description
Name showNav Type boolean Required true Description Set to `true` to show the navigation links in the header.
Name showSearch Type boolean Required true Description Set to `true` to show the site search input form.
Name homeHref Type string Required No Description The `href` of the link for the logo and mobile home link in the navigation links. Defaults to "/"
Name ariaLabel Type string Required No Description Aria label for the logo href. Defaults to "NHS homepage".
Name organisation Type object Required false Description Settings for header with organisational logo.
Name organisation{}.name Type string Required false Description Organisation name value.
Name organisation{}.descriptor Type string Required false Description Organisation descriptor.
Name organisation{}.logoURL Type string Required true Description Organisation logo if using a static asset, such as PNG, is preferred.
Name primaryLinks Type array Required false Description Array of navigation links for use in the header.
Name primaryLinks[].url Type string Required true Description The href of a navigation item in the header.
Name primaryLinks[].label Type string Required false Description The label of a navigation item in the header.
Name transactional Type string Required No Description Set to `true` if this is a transactional header (with smaller logo).
Name transactionalService Type object Required false Description Settings for transactional service header.
Name transactionalService{}.name Type string Required false Description Transactional service name value.
Name transactionalService{}.href Type string Required false Description The href of the transactional header name.
Name transactionalService{}.longName Type boolean Required false Description Set this to `true` if the transactional service name is longer than 22 characters.
Name searchAction Type string Required No Description Custom search action endpoint.
Name searchInputName Type string Required No Description The name for the search field. Defaults to "q"
Name classes Type string Required false Description Classes to add to the header container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the header container.
Copy organisational white with nav header code 
{% from 'header/macro.njk' import header %}

{{ header({
    "showNav": "true",
    "showSearch": "true",
    "searchAction": " ",
    "classes": "nhsuk-header--white nhsuk-header--white-nav",
    "organisation": {
      "name": "Anytown Anyplace",
      "split": "Anywhere",
      "descriptor": "NHS Foundation Trust"
    },
    "primaryLinks": [
      {
        "url"  : "#",
        "label" : "Your hospital visit"
      },
      {
        'url' : '#',
        'label' : 'Wards and departments'
      },
      {
        'url'  : '#',
        'label' : 'Conditions and treatments'
      },
      {
        'url'  : '#',
        'label' : 'Our people'
      },
      {
        'url' : '#',
        'label' : 'Our research'
      }
    ]
  })
}}
Close organisational white with nav header code

You must have a Frutiger font licence to use an NHS organisational logo. Our guidance on typography explains how to get hold of the Frutiger webfont.

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__link" href="/" aria-label="Anyplace Anytown Anywhere NHS Foundation Trust homepage">
  <img class="nhsuk-org-logo" src="/path-to-assets/logo.png" alt="">
</a>

Research

The NHS header was updated in September 2023. It includes exposed navigation links and a drop down that says "More" instead of a menu button. The search box now fills the width of the screen on mobile.

On the NHS website, we found that exposing main topics helps users navigate and find what they're looking for. The dynamic resizing and the "More" button help users on mobile navigate top tasks.

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: April 2024