Breadcrumb

Purpose

The path to the current page, as a named navigation landmark holding a list, the separators hidden and the last step marked current. It looks like a row of links with slashes; what tells them apart is what assistive technology receives.

When to use, when not

Use it on any page more than one level deep in the app. Not on the first level, where it would hold one step, and not as a substitute for a page title.

Anatomy

1. A nav named “Fil d’Ariane”.
2. An ordered list, one item per step.
3. Links for every step but the last; the last step with aria-current="page".
4. Hidden separators.

Props

Props of Breadcrumb

Name	Type	Default	What it does
items	Item[]		The steps, from the root to the current page.
label?	string	"Fil d'Ariane"	The landmark's name.
class?	string	''	Layout classes only.

States

A short path, and a deep one that wraps.

deep

The list wraps on a narrow screen; the count is announced whatever the depth.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

plain

A named landmark holding a list; the separators are hidden and the last step carries aria-current.

Light

Dark

320 px, light

320 px, dark

216 px, light

Forced colours, captured

Accessibility contract

• Role and name: navigation, named by label; a list inside, with role="list" restored.
• Keyboard, focus: the links are ordinary links.
• Live regions: none.
• Print: the trail leaves the paper; it is a way through the screen.

Content rules

French. Each step is the title of the page it leads to, as short as the page allows; the last step is the current page’s title.

Do and don’t

• Do give the last item no href: it is where the user is.
• Do not repeat the breadcrumb in the footer.

Examples

<Breadcrumb items={[{ label: 'Audits', href: '/lab' }, { label: audit.name, href: `/lab/audits/${audit.id}` }, { label: 'Rapport' }]} />

Surfaces

• App: every page under an organisation, a site or an audit, the settings, and the administration, which had none.

Related

Link.

Decisions

• 2026-09-24: the separator is a hidden slash, drawn the same as the hand-made version the site’s demo compares it with, so the difference is only what is restituted.

Criteria held by construction

• 12.6, Les zones de regroupement de contenus présentes dans plusieurs pages web (zones d'en-tête, de navigation principale, de contenu principal, de pied de page et de moteur de recherche) peuvent-elles être atteintes ou évitées ?
  A navigation landmark with its own name, so the path can be reached or skipped like the other regions.
• 9.3, Dans chaque page web, chaque liste est-elle correctement structurée ?
  The steps are an ordered list with its role restored, so the count and the rank are announced.
• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  The current page is told by aria-current, not only by its weight; the links by their underline, not only by their colour.

Tokens it reads

• Colour: --rl-action, --rl-ink, --rl-ink-soft
• Typography: --rl-weight-bold, --rl-text-sm
• Spacing: --rl-space-1, --rl-space-2

Seen in patterns

• App shell