Back link · Club Hub UI

Place it above the page title of detail and sub-pages ("Zurück zu Trainings"). It names the destination, so people know where they land — never just "Zurück".

It is a real link to the parent URL, not history.back(): deep links from emails and push notifications have no history to go back to (UX guide §3.3). Apps may restore the list's scroll position and filters when the parent is the previous route.

The arrow mirrors automatically in right-to-left layouts.

Examples

Detail page back to list

Zurück zu Trainings

Data

render({
  "href": "/trainings",
  "label": "Zurück zu Trainings"
})

Markup

<a class="back-link" href="/trainings"><svg class="icon" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#arrow-left"/></svg>Zurück zu Trainings</a>

Back to a filtered list

Offene Anmeldungen

Data

render({
  "href": "/members?status=pending",
  "label": "Offene Anmeldungen"
})

Markup

<a class="back-link" href="/members?status=pending"><svg class="icon" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#arrow-left"/></svg>Offene Anmeldungen</a>

Data contract

What render(data) accepts — validated against this JSON Schema in development and tests. Unknown fields are rejected. The same schema is in components.json.

Field	Type	Required	Default	Description
`href`	`string`	required	—	URL of the parent page, including its filters (e.g. `/members?status=pending`). min 1 chars
`label`	`string`	required	—	Visible text naming the destination ("Zurück zu Trainings", "Alle Mitglieder"). min 1 chars

JSON Schema

{
  "type": "object",
  "additionalProperties": false,
  "required": [
    "href",
    "label"
  ],
  "properties": {
    "href": {
      "type": "string",
      "minLength": 1,
      "description": "URL of the parent page, including its filters (e.g. `/members?status=pending`)."
    },
    "label": {
      "type": "string",
      "minLength": 1,
      "description": "Visible text naming the destination (\"Zurück zu Trainings\", \"Alle Mitglieder\")."
    }
  }
}

Markup & states

Root: a.back-link — usable without render() by writing the markup directly.

Attributes

Attribute	Values	Default	Description
`href`	`URL`	—	Parent page.

Parts

Part	Description
`svg.icon`	Leading `arrow-left` icon (decorative, mirrored in RTL).

States

State	Description
`:hover`	Underline.
`:focus-visible`	Global focus ring.

Accessibility

Native <a href>; the arrow icon is aria-hidden, the text is the accessible name.
The link text names the destination so it makes sense out of context (screen-reader link lists).
Minimum target height 44 px.

Guidance

DoName the destination: "Zurück zu Trainings".

DoLink to the parent URL with its filters in the query string.

Don'tDon't use javascript:history.back() — deep-linked pages have no history.

Don'tDon't style it as a button; it navigates.

Related: Button · Page header · breadcrumbs