Components · Navigation
BackLink
A link to the parent page with a leading back arrow; works with any router.
Variants
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>Usage examples
With a router link
import { BackLink } from '@rookcom/monarch-react';
<BackLink asChild>
<a href="#/components/back-link">All campaigns</a>
</BackLink>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
hrefor handleonClickyourself.
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:
asChildstyles the product’s own link component, the same way Link and Button do.
API reference
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
subtleuses--mn-color-text-mutedand--mn-color-text-defaulton hover;standaloneuses--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: Deeper hierarchies.
- Link: Inline and standalone text links.
- PageHeader: The page title the back link sits above.
Dependencies
| Kind | Depends on |
|---|---|
| npm packages | @radix-ui/react-slotreact |
| Monarch components | None |
Testing coverage
- Is a link named by its text, with an
aria-hiddenarrow 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