Breadcrumb

Fil d’Ariane de navigation affichant l’emplacement hiérarchique.

Importation

import { Breadcrumb } from 'asterui'

Exemples

Breadcrumb basique

Navigation simple par fil d'Ariane.

</>

• Home
• Documents
• Add Document

import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb>
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
        <Breadcrumb.Item>Add Document</Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

Avec icônes

Fil d'Ariane avec icônes.

</>

• Home
• Documents
• Add Document

import { Breadcrumb } from 'asterui'
import { FolderIcon, DocumentTextIcon } from '@aster-ui/icons'

function App() {
  return (
      <Breadcrumb>
        <Breadcrumb.Item href="/" icon={<FolderIcon size="sm" />}>
          Home
        </Breadcrumb.Item>
        <Breadcrumb.Item href="/documents" icon={<FolderIcon size="sm" />}>
          Documents
        </Breadcrumb.Item>
        <Breadcrumb.Item icon={<DocumentTextIcon size="sm" />}>
          Add Document
        </Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

Séparateur personnalisé

Utiliser une chaîne ou un nœud React comme séparateur.

</>

• Home
• /
• Products
• /
• Details

• Home
• Products
• Details

import { Breadcrumb } from 'asterui'
import { ChevronRightIcon } from '@aster-ui/icons'

function App() {
  return (
      <div className="space-y-4">
        <Breadcrumb separator="/">
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
          <Breadcrumb.Item>Details</Breadcrumb.Item>
        </Breadcrumb>
        <Breadcrumb separator={<ChevronRightIcon size="sm" />}>
          <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
          <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
          <Breadcrumb.Item>Details</Breadcrumb.Item>
        </Breadcrumb>
      </div>
    )
}

export default App

Piloté par données

Utiliser la prop items pour des fils d'Ariane pilotés par données.

</>

• Home
• Products
• Category
• Item Details

import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb
        items={[
          { title: 'Home', href: '/' },
          { title: 'Products', href: '/products' },
          { title: 'Category', href: '/products/category' },
          { title: 'Item Details' },
        ]}
      />
    )
}

export default App

Largeur maximale avec défilement

Fil d'Ariane avec défilement en cas de débordement.

</>

• Home
• Documents
• Projects
• Team
• Add New Member

import { Breadcrumb } from 'asterui'

function App() {
  return (
      <Breadcrumb className="max-w-xs">
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="/documents">Documents</Breadcrumb.Item>
        <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
        <Breadcrumb.Item href="/team">Team</Breadcrumb.Item>
        <Breadcrumb.Item>Add New Member</Breadcrumb.Item>
      </Breadcrumb>
    )
}

export default App

API

Breadcrumb

Propriété	Description	Type	Défaut
children	Composants Breadcrumb.Item (modèle composé)	React.ReactNode	-
items	Données des éléments de fil d’Ariane (modèle piloté par données)	BreadcrumbItemType[]	-
separator	Séparateur personnalisé entre les éléments	React.ReactNode	"/"
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

BreadcrumbItemType (pour la prop items)

Propriété	Description	Type	Défaut
title	Titre/libellé de l’élément	React.ReactNode	-
href	URL du lien	string	-
onClick	Gestionnaire de clic	() => void	-
className	Classe CSS personnalisée	string	-
data-testid	ID de test pour les tests	string	-

Breadcrumb.Item (modèle composé)

Propriété	Description	Type	Défaut
children	Contenu de l’élément (texte ou éléments)	React.ReactNode	-
href	URL du lien (rend l’élément cliquable)	string	-
onClick	Gestionnaire de clic (rend l’élément cliquable)	() => void	-
icon	Icône à afficher avant le libellé	React.ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Conseils d’utilisation

• Omettre href/onClick sur le dernier élément pour afficher l’emplacement actuel
• Utiliser des classes max-width pour activer le défilement horizontal
• Ajouter des icônes en utilisant la prop icon sur Breadcrumb.Item