Brickslab.

@brickslab/ui-web

Fil d'Ariane de navigation permettant à l'utilisateur de visualiser et naviguer dans la hiérarchie des pages. Supporte les liens internes, les séparateurs personnalisés et marque automatiquement l'élément courant.

Aperçu

3 niveaux — séparateur par défaut « / »

séparateurs personnalisés

separator="›"
separator="→"

2 niveaux

Props

PropTypeDéfautRequisDescription
itemsBreadcrumbItem[]—✓Liste des éléments du fil d'Ariane. Le dernier élément représente la page courante (sans href).
separatorstring"/"—Caractère ou chaîne utilisé comme séparateur entre les éléments.

Utilisation

tsx
import { Breadcrumb } from "@brickslab/ui-web";

// Fil d'Ariane à 3 niveaux
<Breadcrumb
  items={[
    { label: "Accueil", href: "/" },
    { label: "Composants", href: "/components" },
    { label: "Breadcrumb" },
  ]}
/>

// Séparateur personnalisé
<Breadcrumb
  items={[
    { label: "Accueil", href: "/" },
    { label: "Documentation", href: "/docs" },
    { label: "Mise en route" },
  ]}
  separator="›"
/>

// Fil d'Ariane minimal (2 niveaux)
<Breadcrumb
  items={[
    { label: "Composants", href: "/components" },
    { label: "Heading" },
  ]}
/>