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="ons-breadcrumb" aria-label="Back">
  <ol class="ons-breadcrumb__items ons-u-fs-s">
    <li class="ons-breadcrumb__item" id="breadcrumb-1">
      <a class="ons-breadcrumb__link" href="/" id="back" data-attribute="Example attribute">Back</a>
      <svg class="ons-svg-icon " viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
        <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/breadcrumbs/_macro.njk" import onsBreadcrumbs %}

{{
    onsBreadcrumbs({
        "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 hierarchy.

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 base page template in pageConfig. This will ensure it will have the correct placing on the page.

Research on this component

Based upon W3 principles 

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Back link’ component on GitHub