Top navigation

Use the top navigation to help users access ‘Help’ and ‘Account and settings’ links from anywhere in the app.

The top navigation menu. There are two right-aligned icons: one is a question mark and the other is shaped like a person.

When to use

The top navigation is visible at the top almost every screen within the main app journey. The exception is when external pages open in a web browser overlay.

The top navigation remains fixed in position as users scroll.

When not to use

On the web browser version of the NHS App, we use an NHS.UK header with text links, instead of the top navigation with icons.

How to use

The top navigation includes a link to the NHS App help and support pages hosted on NHS.UK. This is a contextual link that takes users to a page relevant to their location in the app. For example, if a user is on a prescription screen, the help link will open a help page about prescriptions.

The top also includes an ’Account and settings’ link. This opens the respective hub page.

Details of the top navigation menu. The question mark icon links to Help and Support. The person icon links to Account.

Accessibility

The top navigation icons do not have text labels. They have aria labels which are announced by screen readers.

Research

In our research, people recognised the meaning of the icons without the need for text labels.

Help improve this component

If you have used or researched this component, please let us know what you found so we can make it better for everyone.

Discuss 'Top navigation' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.