Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Back link

Use a back link to allow users to return to a previous page or step of a process.

Contents

  1. Component status
  2. When to use this component
  3. When not to use this component
  4. How it works
Open this example in new tab

HTML 

<a href="#" class="tna-back-link">
  <span class="tna-back-link__inner">Back to previous page</span>
</a>

Nunjucks

Nunjucks options
Primary options
Name Type Description
text string

The text of the back link.

Default value: Back
href string

Required.

The URL of the back link.
classes string

Classes to add to the back link.
attributes object

HTML attributes (for example data attributes) to add to the back link.

 
{% from "nationalarchives/components/back-link/macro.njk" import tnaBackLink %}

{{ tnaBackLink({
  text: "Back to previous page",
  href: "#"
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/back-link/macro.html" import tnaBackLink %}

{{ tnaBackLink({
  "text": "Back to previous page",
  "href": "#"
}) }}

Component status

Phase
To be reviewed
Tested without JavaScript
Yes
Tested without CSS
Yes
Passed DAC audit
Not yet audied

When to use this component

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

When not to use this component

Never use the back link component together with the breadcrumbs component. If necessary, you should do research with your users to learn which they find more helpful in your service.

How it works

Always place back links at the top of a page, before the <main> element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including the back link.

Make sure the link takes users to the previous page they were on, in the state they last saw it.

Where possible, ensure the back link works even when JavaScript is not available. If this is not possible, you should hide the back link when JavaScript is not available.

Using the default link text (‘Back’) is ideal for services with a simple journey.

For more complex user journeys, consider using different link text, like ‘Go back to [page]’. For example, in an admin system with many different areas. In this case, if you used ‘Back’, it might not be clear to users what they are going back to.

Back to top