Source: https://monarchui.dev/components/back-link/

Components · Navigation

# BackLink

A link to the parent page with a leading back arrow; works with any router.

@rookcom/monarch-react

Component

## Variants

## Usage examples

### With a router link

## Purpose

Takes the reader one level up from a detail page (“Back to domains”, “All invoices”) with a consistent arrow, colour, focus ring and touch target.

### Use when

- A detail or settings page has a single, known parent list.
- Breadcrumbs would be one item deep.

### Avoid when

- The hierarchy is two or more levels deep: use Breadcrumb.
- You need browser history (“wherever I came from”): that is a product decision; pass the resolved `href` or handle `onClick` yourself.

## Design principles

- Name the destination, not the direction: “Back to domains” beats “Back”.
- Quiet by default (`subtle`): it sits above the page title and must not compete with it.
- Router-agnostic: `asChild` styles the product’s own link component, the same way Link and Button do.

## API reference

```tsx
import { BackLink } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `BackLink` | component | server-safe | `.mn-back-link` |

Forwards its ref to the `<a>` (or the child element with `asChild`). All native anchor attributes pass through.

With `asChild`, the arrow is inserted before the child’s own children through Radix `Slottable`.

Generated from the TypeScript declarations of `packages/react/src/components/navigation/back-link`.

## Properties

### `BackLink`

A link to the parent page, with a leading back arrow. Works with any router through `asChild`.

| Prop | Type | Description |
| --- | --- | --- |
| `children` required | `ReactNode` | The destination, named in the text: "Back to domains", "All invoices". |
| `asChild` | `boolean` | Render the child element (e.g. a Next.js `<Link>` or React Router `<NavLink>`) with back-link styling and the arrow, instead of an `<a>`. |
| `className` | `string` |  |
| `id` | `string` |  |
| `variant` | `"subtle" \| "standalone"` | `subtle` (default) is muted text that darkens on hover; `standalone` uses the link colour. |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `variant` | `'subtle'``'standalone'` | `subtle` is muted text that darkens on hover; `standalone` uses the link colour and underlines on hover (`data-variant`). |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Hover | – | Text darkens (or underlines) and the arrow nudges 2px towards the start edge. |
| Focus | – | Visible focus ring on `:focus-visible` only. |

## Interaction behaviour

- Native link behaviour: click, Enter, middle-click and “open in new tab” all work.
- With `asChild`, navigation is handled by the router link you pass.

## Keyboard support

| Keys | Action |
| --- | --- |
| Tab | Moves focus to the link. |
| Enter | Follows the link. |

## Accessibility

Role

link

Accessible name

The visible text.

- The arrow is `aria-hidden`, so it never adds “left arrow” to the name.
- Minimum height of 24px meets WCAG 2.2 target size (2.5.8).
- The arrow mirrors in right-to-left documents (`dir="rtl"`).

## Responsive behaviour

- Inline size; the text may wrap on narrow screens, with the arrow centred beside it.

## Theme support

- `subtle` uses `--mn-color-text-muted` and `--mn-color-text-default` on hover; `standalone` uses `--mn-color-text-link`. Both meet AA in every theme.
- The arrow nudge is turned off under reduced motion.

## Do and don't

### Do

- Place it above the page title, aligned with the content edge.
- Name the parent page in the text.

### Don't

- Do not use it for a “Cancel” action in a form: use a Button.
- Do not show a BackLink and a one-item Breadcrumb together.

## Related components

- [Breadcrumb](https://monarchui.dev/components/breadcrumb/): Deeper hierarchies.
- [Link](https://monarchui.dev/components/link/): Inline and standalone text links.
- [PageHeader](https://monarchui.dev/components/page-header/): The page title the back link sits above.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `@radix-ui/react-slot``react` |
| Monarch components | None |

## Testing coverage

- Is a link named by its text, with an `aria-hidden` arrow and the default variant.
- Renders a router link with `asChild`, keeping the arrow, classes and variant.
- Reachable with Tab and activated with Enter.
- Forwards the ref.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery; Cross-browser axe: /components/back-link |

Tests: `packages/react/src/components/navigation/back-link`

## All example code

### Variants

```tsx
import { BackLink } from '@rookcom/monarch-react';

<BackLink href="#/components/back-link">Back to domains</BackLink>
<BackLink href="#/components/back-link" variant="standalone">
  All invoices
</BackLink>
```

### With a router link

```tsx
import { BackLink } from '@rookcom/monarch-react';

<BackLink asChild>
  <a href="#/components/back-link">All campaigns</a>
</BackLink>
```