Overriding breadcrumbs with a back link

Basic example

In a simple case, a back link can replace the breadcrumbs component. Here's how you can set it up:



{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block breadcrumbs %}
  <a href="{{ sitemarkers['PREVIOUS_PAGE_SITEMARKER_NAME'].url }}" class="govuk-back-link">Back</a>
{% endblock %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  <div class="govuk-form-group">
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="schema-name">
        {{ page.title }} 
      </label>
    </h1>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>
{% endblock %}

Enhanced example

In the majority of cases, you may need to include a parameter (such as a record ID) in the back link URL. This can be achieved dynamically by appending parameters to the back link.



{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block breadcrumbs %}
  {% unless params.id %}
    <a href="{{ sitemarkers['PREVIOUS_PAGE_SITEMARKER_NAME'].url }}" class="govuk-back-link">Back</a>
  {% endunless %}
  <a href="{{ sitemarkers['PREVIOUS_PAGE_SITEMARKER_NAME'].url | add_query: 'id', params.id }}" class="govuk-back-link">Back</a>
{% endblock %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  {% unless params.id %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/RecordNotFound'].url }}"
    </script>
  {% endunless %}

  <div class="govuk-form-group">
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="schema-name">
        {{ page.title }} 
      </label>
    </h1>
    <input class="govuk-input" id="schema-name" name="schema-name" type="text">
  </div>
{% endblock %}

Explanation of the enhanced example

In the enhanced example, the back link dynamically adds the id parameter to the URL. This ensures that users are directed back to the exact record they were previously viewing, preserving context in the journey.

Key differences:

Without the params.id check, the back link will simply redirect the user to the previous page.
When the params.id is present, it is appended as a query parameter to the back link, allowing the back navigation to retain context by including the record's ID.

Best practices

When implementing back links in a service, ensure they are consistent and provide a clear and intuitive navigation experience for the user. For pages involving records, include the appropriate parameters in the URL to preserve context, and handle missing parameters gracefully with error handling.