Back link

Overview

Use a back link to help the user go back to the previous page of a transaction or questionnaire.

Example Back Link contents

Nunjucksfor Example Back Link
HTMLfor Example Back Link

Nunjucks

{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}

{{
    onsBreadcrumbs({
        "ariaLabel": 'Back',
        "itemsList": [
            {
                "url": '/',
                "id": "backlink",
                "text": 'Back',
                "attributes": {
                    "data-attribute": "Example attribute"
                }
            }
        ]
    })
}}

HTML

<nav class="ons-breadcrumbs" aria-label="Back">
  <ol class="ons-breadcrumbs__items ons-u-fs-s">
    <li class="ons-breadcrumbs__item" id="breadcrumb-1">
      <a class="ons-breadcrumbs__link" href="/" id="backlink" data-attribute="Example attribute">Back</a>
      <svg class="ons-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>

When to use this component

Question pages

Always use the back link component on a question page.

Use “previous” as the label when the previous page is a question.

Linear transactions

Use a back link on every page of a linear transaction, if it makes sense to do so.

Research has shown users do not often trust the browser back button when navigating back through transactions, especially after submitting form data in financial transactions.

When not to use this component

Do not use the back link component on a page that:

contains the breadcrumbs component
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 allows them to be skipped with the skip to content component.

To ensure the component is placed correctly set breadcrumbs in the pageConfig of the base page template.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Back link’ component on GitHub (opens in a new tab)

Cookies on ons.gov.uk