Navigation – Back link

Use back links to help users go back to the previous page in a multi-page transaction.

<a class="nhsuk-back-link" href="#">
  Back
</a>

{% from "back-link/macro.njk" import backLink %}

{{ backLink({
  href: "#",
  text: "Back"
}) }}

When to use a back link

We only use back links on transactional services or multi-page forms.

The GOV.UK design system recommends including a back link on question pages. Read more about question pages on GOV.UK.

You can include a back link on other pages in a multi-page transaction, if it makes sense to do so.

When not to use a back link

Do not use a back link on a content page, like a health information page.

Do not use a back link with breadcrumbs.

How to use back links

Make sure the text used in the link describes the action, for example "Back". Carry out research with users to find the words that help them the most.

The link should take users back to the page they were on in the state they last saw it. Make sure information they have already entered is pre-populated. Do not pre-populate if the information is no longer valid, or when pre-populating would be a major safety or security concern.

Generally, the back link should go at the top left of the page. Within the HTML it should appear before the <main> tag. This is so that skip link skips past the back link to the main content.

If you put the back link in a different position, do not put it close to other links or buttons where it might distract users from what they need to do. Also think about people who use a screen reader: is the page read out in a logical order?

Back link as a button

You can render the back link as a button element if necessary in order to post form data back to the previous page.

<button class="nhsuk-back-link" type="submit">
  Back
</button>

{% from "back-link/macro.njk" import backLink %}

{{ backLink({
  text: "Back",
  type: "submit"
}) }}

Back link on dark backgrounds

To show white links and chevrons on dark backgrounds, add the variant: "reverse" option using Nunjucks. For HTML add the nhsuk-back-link--reverse class to the back link.

Make sure all users can see the back link. The background colour must have a contrast ratio of at least 4.5:1 with white to meet WCAG 2.2 success criterion 1.4.3 Contrast (minimum), level AA (W3C).

<a class="nhsuk-back-link nhsuk-back-link--reverse" href="#">
  Back
</a>

{% from "back-link/macro.njk" import backLink %}

{{ backLink({
  text: "Back",
  href: "#",
  variant: "reverse"
}) }}

Research

During testing, NHS 111 online found that some users wanted to change their answers, so they introduced a back link and labelled it to "Change my previous answer".

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.