Skip to main content

Back link

A back link is used to help the user go back to the previous page of a transaction or questionnaire.

<nav class="breadcrumb" aria-label="Back">
  <ol class="breadcrumb__items u-fs-s">
    <li class="breadcrumb__item" id="breadcrumb-1">
      <a class="breadcrumb__link" href="/" id="back" data-attribute="Example attribute">Back</a>
      <svg class="svg-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false">
        <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
      </svg>
    </li>
  </ol>
</nav>
{% from "components/breadcrumb/_macro.njk" import onsBreadcrumb %}
{{
    onsBreadcrumb({
        "ariaLabel": 'Back',
        "itemsList": [
            {
                "url": '/',
                "id": "back",
                "text": 'Back',
                "attributes": {
                    "data-attribute": "Example attribute"
                }
            }
        ]
    })
}}

When to use this component

Always use the back link component on a question page. Use ‘previous’ as the label in a questionnaire when the previous page is a question.

You should also use a back link on every page of linear transaction, if it makes sense to do so.

Research has shown users don’t often trust the browser back button when navigating back through transactions, especially after submitting form data in financial transactions. Providing a back link helps users feel in control of your service.

When not to use this component

Don’t use the back link component together with the breadcrumbs component. Don’t use it on a website content page that is part of a multi-level heirarchy.

How to use this component

The back link reuses the same interface and parameters as the breadcrumbs component.

Always place back links before a page’s <main> content element. This makes sure the Skip to content link allows the user to skip all navigation, including the back link. Where possible this should be set in the page template in pageConfig. This will ensure it will have the correct placing on the page.

Research on this component

Based upon W3 principles 

If you have conducted any user research using this component, please feed back your findings via the Design System forum 

Design System forum

Discuss ‘Back link’ on GitHub