Skip to main content

Back link

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

Code and design

Open in new window
Copy
<div class="nhsuk-back-link">
  <a class="nhsuk-back-link__link" href="#">
    <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
    </svg>
    Go back</a>
</div>
Copy
{% from 'back-link/macro.njk' import backLink %}

{{ backLink({
  "href": "#",
  "text": "Go 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 "Go 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.

Consider where you put the back link. Do not put it close to other links or buttons where it might distract users from what they need to do.

The GOV.UK design system says that you should put back links at the top of a page, but a couple of NHS services (NHS 111 online and Find out why your NHS data matters) found that it works better at the bottom of the page below the primary action. That's because we don't want to suggest to people who use a screen reader that they leave the page prematurely.

Accessibility

When you're considering where to put back link on a page, think about people who use a screen reader.

Also, make sure the text you use describes the action. Do not rely on "Go back". It might not reflect what users expect.

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

The Digital Accessibility Centre recommended that Find out why your NHS data matters place their back link below the primary action, because screen reader users were confused when they landed on a page and were immediately told to go back.

Discuss

Discuss back links on GitHub

Get in touch

If you have a question:

Updated: February 2019

Similar components