Breadcrumb

Un composant de navigation hiérarchique qui indique la position de l'utilisateur. Il inclut automatiquement l'icône **Home** et supporte la réduction des éléments (**ellipsis interactive**) pour les chemins longs, ainsi que les **menus déroulants** dans les items.

Exemple de base

// Sans collapse
<Breadcrumb 
    items={[        
        { href: "/home", label: "Home" },        
        { href: "/docs", label: "Documentation" },        
        { label: "Breadcrumb" }
    ]}    
    variant="text"    
    separator="icon"
    showHomeIcon={false}
/>

Avec Ellipsis (Chemin long)

const longItems = [/* ... 6 éléments */];

<Breadcrumb 
    items={longItems} // 6 éléments > maxItems=4
    maxItems={4} 
    separator="icon" 
/>

Breadcrumb avec Menu Déroulant (Dropdown)

// Ceci doit être dans un fichier marqué "use client"
const itemsWithDropdown = [
    { href: "/home", label: "Accueil" },
    { 
        label: "Sections",
        dropdown: { 
            items: [
                { href: "/produits", label: "Tous les produits" },
                { label: "Promotions", onClick: () => console.log(...) }, // Fonction
            ]
        },
    },
    // ... suite du chemin
];
<Breadcrumb items={itemsWithDropdown} showHomeIcon={false} />

Variantes de Style et Séparateur

<Breadcrumb items={items} variant="text" separator="icon" />

Type: button, Separator: slash

<Breadcrumb items={items} variant="button" separator="slash" />

Type: text-line, Separator: icon

<Breadcrumb items={items} variant="text-line" separator="icon" />

API Reference

Breadcrumb Props

Prop	Type	Default	Description
items	BreadcrumbItemData[]	-	The array of navigation elements.
maxItems?	number	4	The maximum number of `items` to display before activating the reduction ellipsis.
variant?	'text' \| 'text-line' \| 'button'	'text'	The style of the items: text link (`text`), text with separator line (`text-line`), or button (`button`).
separator?	'icon' \| 'slash' \| React.ReactNode	'icon'	The separator variant between items.
showHomeIcon?	boolean	true	Displays or hides the Home icon at the beginning of the breadcrumb trail.
showEllipsisDropdown?	boolean	true	If `true`, the ellipsis is a clickable dropdown menu displaying hidden links.

Type: BreadcrumbItemData

Props	Type	Description
label	string	The text displayed for the item.
href?	string	The destination URL. If omitted and there is no `dropdown`, the item is rendered as the current page (non-clickable).
dropdown?	{ items: Array<{ label: string; href?: string; onClick?: () => void }> }	Object to create an integrated dropdown menu for this item. The item becomes clickable to open this menu.

Custom Components with BreadcrumbCustom

For advanced customization:

BreadcrumbCustom.Root- Container wrapper
BreadcrumbCustom.List- Items wrapper
BreadcrumbCustom.Item- Individual breadcrumb item container
BreadcrumbCustom.Link- Breadcrumb item component used to display a link
BreadcrumbCustom.Page- Breadcrumb item component used to display the current/last item
BreadcrumbCustom.Separator- Breadcrumb separator component
BreadcrumbCustom.Ellipsis- Breadcrumb ellipsis component used when reducing the number of shown items