Fil d'Ariane

Affiche la position de la page courante dans la hiérarchie et permet de remonter niveau par niveau.

Utilisation de base

Utilisation de base

import { LhBreadcrumb, LhBreadcrumbItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhBreadcrumb>
      <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
      <LhBreadcrumbItem to="/components">Composants</LhBreadcrumbItem>
      <LhBreadcrumbItem>Fil d'Ariane</LhBreadcrumbItem>
    </LhBreadcrumb>
  )
}

Breadcrumb Props

Prop	Description	Type	Options	Valeur par défaut
separator	Caractère séparateur	string	—	'/'
maxItems	Nombre maximal d'éléments visibles ; au-delà, réduction à « premier élément + points de suspension + dernier élément »	number	—	0 (pas de réduction)
sx	Raccourci de mise en page	SxProps	—	—

Propriétés de BreadcrumbItem

Prop	Description	Type	Valeur par défaut
to	Adresse de destination ; rendu sous forme de lien lorsqu'il est fourni et que l'élément n'est pas le dernier	string	—
replace	Conservé pour la compatibilité avec l'API de plus ; la navigation native <a> côté React n'est pas affectée par ce commutateur	boolean	false
children	Texte	ReactNode	—

Contrôlé / non contrôlé

L'état de réduction est un état interne du composant : un clic sur le bouton de points de suspension affiche tous les éléments, sans intervention externe. maxItems à 0 ou omis signifie aucune réduction.

Restriction sur les enfants

children doit être directement constitué de LhBreadcrumbItem (rendu possible via .map) et ne peut pas être enveloppé dans un composant personnalisé — le composant parent injecte les index en filtrant les types d'enfants via Children.toArray ; une enveloppe briserait cette injection. Cohérent avec la restriction de descente collectPaneVnodes de lh-ui-plus.

Connexion au routeur

L'écosystème React n'a pas de routeur global : les liens sont rendus en <a> natifs avec navigation directe. Avec React Router, interceptez via onClick et appelez navigate, ou rendez vous-même un <Link> à la place de to.

Accessibilité

L'élément racine est un <nav aria-label>, la liste une <ol> ; le dernier élément porte aria-current="page", et le bouton de points de suspension a un aria-label (pack de langue breadcrumb.more).

ref

forwardRef<HTMLElement> — élément racine <nav>. LhBreadcrumbItem transmet un HTMLLIElement.

Styles

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/breadcrumb'