Navigation
–
Back link
Use back links to help users go back to the previous page in a multi-page transaction.
Back links updated in August 2025
WCAG 2.2: Make sure that users can successfully avoid re-entering information they've previously given when they go back to a page and interact with back links.
<a class="nhsuk-back-link" href="#">
Back
</a>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work. These are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| id | string | The ID of the back link. |
| text | string |
Text to use within the back link component. If html is provided, the text argument will be ignored. Defaults to "Back".
|
| html | string |
HTML to use within the back link component. If html is provided, the text argument will be ignored. Defaults to "Back".
|
| href | string |
The value of the link href attribute.
|
| classes | string | Classes to add to the container. |
| attributes | object | HTML attributes (for example data attributes) to add to the tag. |
|
visually |
string |
An optional visually hidden prefix used before the back link text, for example "Back to" used by the breadcrumbs component.
|
| element | string |
HTML element for the back link component – "button" or "a". If not provided, defaults to "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.
If a user goes back to a previous page, 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. This is to comply with WCAG 2.2 success criterion 3.3.7 Redundant Entry (W3C).
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?
Make sure no other interactive elements are too close to the back link so users can easily interact with it. This is to comply with WCAG 2.2 success criterion 2.5.8 Target Size (W3C).
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">
Back
</button>{% from "back-link/macro.njk" import backLink %}
{{ backLink({
text: "Back",
element: "button"
}) }}Back link on dark backgrounds
Use the nhsuk-back-link--reverse modifier class to show white links and chevrons on dark backgrounds.
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>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work. These are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Description |
|---|---|---|
| id | string | The ID of the back link. |
| text | string |
Text to use within the back link component. If html is provided, the text argument will be ignored. Defaults to "Back".
|
| html | string |
HTML to use within the back link component. If html is provided, the text argument will be ignored. Defaults to "Back".
|
| href | string |
The value of the link href attribute.
|
| classes | string | Classes to add to the container. |
| attributes | object | HTML attributes (for example data attributes) to add to the tag. |
|
visually |
string |
An optional visually hidden prefix used before the back link text, for example "Back to" used by the breadcrumbs component.
|
| element | string |
HTML element for the back link component – "button" or "a". If not provided, defaults to "a".
|
{% from "back-link/macro.njk" import backLink %}
{{ backLink({
href: "#",
text: "Back",
classes: "nhsuk-back-link--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.
Feed back or share insights on GitHubRead more about how to feed back or share insights.
If you have any questions, get in touch with the service manual team.
Updated: November 2025