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.

The standard NHS header is made up of 4 elements:

• the NHS logo and service name
• a search bar
• navigation
• logged-in account information and links

This page also covers:

• inline account or search
• organisational headers and information about organisational logos

When to use the standard header

Use the standard NHS header if your service is a national NHS service in England.

When not to use the standard header

Do not use the NHS logo alone if your service is a local NHS service. Use the organisational header instead.

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

How to use the standard header

The standard header is made up of 4 elements:

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

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.

If you add a link to a "help" page in your service's header, you must position it consistently in the header and always link to the same place.

NHS logo and service name

The NHS logo must always be used. Add a service name to distinguish your service from the main NHS website at www.nhs.uk.

Search bar

The header can include a search bar.

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

If your service is not part of the main NHS website, you will have to arrange your own search functionality, if you need it.

Navigation

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.

Logged-in account information and links

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

When to use it

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

How to use it

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.

Inline account or search

To keep account links or the search bar inline with the logo and service name on small screens, add the inline: true Nunjucks option. For HTML add the nhsuk-header--inline class to the table.

Inline account links

Inline search

Use the organisational header if your organisation or service is a regional or local NHS service, such as an NHS trust.

All NHS websites need to have an nhs.uk domain. See Network addressing (NHS England).

There are 3 variants of the organisational header:

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

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>

Progressive enhancement

The header component uses progressive enhancement and requires JavaScript for enhanced functionality.

When JavaScript is not available, users will not see the drop-down "More" button. Navigation links will be wrapped onto multiple lines.

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.

Read more about how to feed back or share insights.

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

Updated: June 2026