Fil d’Ariane

Un fil d’Ariane dit où se situe une page. Le dernier élément est la page courante : il est rendu en texte simple et marqué aria-current="page", parce qu’un lien vers la page où l’on se trouve déjà n’est que du bruit.

Fil d’Ariane de base

breadcrumbs({
  items: [
    { label: 'Accueil', href: '/' },
    { label: 'Documentation', href: '/docs' },
    { label: 'Routage' },
  ],
})

Séparateur

N’importe quelle chaîne ou balisage. Dans tous les cas, les séparateurs sont masqués aux lecteurs d’écran.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Accueil', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Fil d’Ariane' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Accueil', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Fil d’Ariane' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Accueil', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Fil d’Ariane' }],
  }),
)

Chaînes simples

Un élément sans href n’est que du texte, où qu’il apparaisse — pas seulement à la fin.

breadcrumbs({
  items: ['Accueil', 'Archives', '2026', 'Mars'],
})

À partir d’un chemin

Sur un site statique, la trace se déduit généralement de la route plutôt que de s’écrire à la main.

return (() => {
  const path = '/docs/guides/routing'
  const segments = path.split('/').filter(Boolean)

  return breadcrumbs({
    items: [
      { label: 'Accueil', href: '/' },
      ...segments.map((segment, index) => ({
        label: segment.replace(/-/g, ' '),
        href: index === segments.length - 1 ? undefined : '/' + segments.slice(0, index + 1).join('/'),
      })),
    ],
  })
})()

Nommer le nav

L’ensemble est un <nav> avec un nom accessible, pour qu’un lecteur d’écran puisse y sauter. Changez ce nom avec label quand une page a plus d’un point de repère de navigation.

breadcrumbs({
  label: 'Fil d’Ariane de la documentation',
  items: [{ label: 'Documentation', href: '/docs' }, { label: 'Composants' }],
})

Props

Prop	Type	Défaut	Description
`items`	`Array`	`[]`	Des chaînes, ou des objets { label, href }. Le dernier est la page courante.
`separator`	`Child`	`'/'`	Dessiné entre les éléments, masqué aux lecteurs d’écran.
`label`	`string`	`'Breadcrumb'`	Nom accessible du repère nav.