BjBreadcrumb

Fil d’Ariane React : tableau d’entrées avec libellé et lien optionnel ; le dernier segment est la page courante sans lien.

Utilisation

import { BjBreadcrumb } from '@flrxnt/dsbj/react'

export default function App() {
  return (
    <BjBreadcrumb
      items={[
        { label: 'Accueil', to: '/' },
        { label: 'Démarches', to: '/demarches' },
        { label: 'Demande' },
      ]}
    />
  )
}

Aperçu

Un seul segment

Un tableau à un élément : fil d’Ariane réduit à la page courante.

import { BjBreadcrumb } from '@flrxnt/dsbj/react'

export function SingleCrumb() {
  return <BjBreadcrumb items={[{ label: 'Tableau de bord' }]} />
}

Plusieurs niveaux avec to

Chaque entrée sauf la dernière peut avoir to pour rendre un lien.

import { BjBreadcrumb } from '@flrxnt/dsbj/react'

export function DeepPath() {
  return (
    <BjBreadcrumb
      items={[
        { label: 'Accueil', to: '/' },
        { label: 'Ministères', to: '/ministeres' },
        { label: 'Éducation', to: '/ministeres/education' },
        { label: 'Inscription' },
      ]}
    />
  )
}

Dernier segment (page courante)

Le dernier item est toujours rendu en <span aria-current="page">, même si to est fourni (le lien ne s’applique qu’aux items dont l’index est strictement inférieur au dernier).

import { BjBreadcrumb } from '@flrxnt/dsbj/react'

/** Le dernier item reste un span courant même avec to (non cliquable). */
export function LastWithToIgnored() {
  return (
    <BjBreadcrumb
      items={[
        { label: 'Accueil', to: '/' },
        { label: 'Page actuelle', to: '/should-not-link' },
      ]}
    />
  )
}

Attributs natifs du nav

className, id, aria-label, etc. sont fusionnés sur le <nav> racine.

import { BjBreadcrumb } from '@flrxnt/dsbj/react'

export function WithNativeAttrs() {
  return (
    <BjBreadcrumb
      className="page-breadcrumb"
      aria-label="Vous êtes ici"
      id="breadcrumb"
      items={[
        { label: 'Accueil', to: '/' },
        { label: 'Contact' },
      ]}
    />
  )
}

Props

PropDescription
itemsTableau d’objets BjBreadcrumbItem : chaîne label obligatoire, chaîne to optionnelle pour les niveaux avant le dernier.
…restAttributs natifs du nav et className fusionnés sur l’élément racine.