Skip to main content
Design system

Beta This is a new service. Your feedback will help us improve it.

Header

Updated in October 2026

Use the site header to show users they are on a DHCW service and to give access to primary navigation and search.

Open this example in a new tab
Service name

When to use the header

Use a site header on every page of a public-facing or internal service to show users they are on an official DHCW digital service.

If you use the page template, the header is included by default.

How to use the header

The header contains the NHS Wales logo and service name. It can also include search when users need to search the service.

Keep the number of items in the header to a minimum so users can easily identify the service and the actions available to them.

Use a short, clear service name that helps users understand which service they are using.

With navigation

Add site navigation when users need to move between the main sections of your service.

Include a <nav class="nhsw-site-header__nav"> element immediately after the closing </div> of nhsw-site-header__container to add a navigation row below the top bar. See the site navigation component for more guidance

On smaller screens, the navigation is hidden. Use the mobile bottom navigation instead.

Use nhsw-site-header__nav-link--current and aria-current="page" to show the current page.

Without navigation

If your service does not need site navigation, do not include the <nav> element. The header can be used on its own.

Without a search bar

Open this example in a new tab
Service name

If your service does not need search, remove the nhsw-site-header__search element. The header can be used without search.

Mobile bottom navigation

On smaller screens, the header navigation is hidden. Use nhsw-bottom-nav to show the main navigation at the bottom of the screen instead.

The bottom navigation is only shown on mobile.

Preventing content overlap

When using bottom navigation, add nhsw-has-bottom-nav to <body>. This adds space at the bottom of the page so content is not hidden behind the navigation.

Current page

Use nhsw-bottom-nav__link--current and aria-current="page" to show which page the user is currently viewing.

Icons

Place icons inside nhsw-bottom-nav__icon. If an icon is decorative, use aria-hidden="true" so screen readers ignore it. Use nhsw-bottom-nav__label for the visible link text.

Accessibility

Headers must use a semantic <header> element so assistive technologies can identify it as a landmark. This supports WCAG 2.2 Success Criterion 1.3.1 Info and Relationships, level A.

The search input must have a visible or programmatically associated label. Do not rely on placeholder text alone. This supports WCAG 2.2 Success Criterion 3.3.2 Labels or Instructions, level A.

Source

Learn more about Headers in the NHS England Design System.

Back to top

Header variants

Logged-in header

Open this example in a new tab
Open this example in a new tab

Use this variant when users are signed in to a service.

You can show account information such as the user’s name and role. Account information can be links or plain text.

Keep account links to a minimum. If you need more than 3, consider moving them to a separate account page.

Put ‘Log out’ last in the list of account links on both desktop and smaller screens.

Logged-in header (with service name)

Open this example in a new tab
Service name
Open this example in a new tab
Service name

Use this variant when users are signed in and need to know which service they are using.

Always show the service name when users sign in to a service. This helps them understand which service or system they have accessed.

You can use account information and links alongside other header features, such as search. Keep the number of items in the header to a minimum.

User information

Consider showing account information if users:

  • share a computer
  • have more than 1 account or role
  • need to confirm which organisation or service they are working in

Show only the information users need to identify their account, such as their name, email address, role or organisation.

Use the profile icon on the icons page to highlight 1 item of account information. Do not use it for more than 1 item.

Test the account information with users to find out which details help them identify the correct account, for example their full name or their email address.

Public facing header

Open this example in a new tab
Title
Open this example in a new tab
Title

Use this variant for public-facing services.

Use the standard DHCW or NHS Wales logo to provide consistent branding and help users recognise that they are using an official NHS Wales service.

Patient header

Open this example in a new tab

ANDERSON, Mary (Ms)

Date of birth:
4 Apr 1990 (35y 5m)
NHS number:
123 456 7890
Gender:
Female
Adverse reactions:
Peanuts, Milk, Lactose, Eggs, Shellfish
View or change

Use the patient header on pages where users view, edit or act on a specific patient’s record, for example when:

  • prescribing medication
  • recording clinical notes
  • booking an appointment

You can adapt the information shown to meet the needs of your service. However, users must always be able to identify the correct patient quickly and accurately.

Prioritise core patient identifiers. Do not add secondary information, such as contact details or administrative notes, if it makes the core identifiers difficult to find or read.

Back to top

Examples

Welsh Immunisation System (WIS)

This example shows an administrative setup page from the School-age Immunisations service featuring a persistent top header. It demonstrates how you can change the background colour of the header to match your specific service branding, while maintaining official DHCW branding.

Administrative setup page with the School-age Immunisations header and primary navigation

Choose Pharmacy

This is an example of the Clinical Conditions Management process for a specific patient within Choose Pharmacy, where the patient header is placed directly underneath the general header throughout the process to maintain continuous visual confirmation of the patient's identity.

Clinical Conditions Management symptoms and history page with the patient header below the general header

Back to top