Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant de fil d'Ariane

Dernière mise à jour:

Navigation dans le fil d'Ariane CSS Tailwind uniquement en CSS avec séparateurs personnalisés et balisage de points de repère accessible. WCAG AA, fonctionne avec Django, HTMX, Laravel, React et tout projet Tailwind CSS v4.

Les composants du fil d'Ariane affichent la hiérarchie de navigation et aident les utilisateurs à comprendre leur emplacement sur un site Web. Construit avec des éléments de navigation HTML sémantiques et des repères ARIA pour l'accessibilité, le fil d'Ariane améliore la convivialité en permettant aux utilisateurs de naviguer rapidement vers les sections parentes. Le système de fil d'Ariane Frutjam restitue automatiquement les séparateurs et prend en charge les séparateurs personnalisés pour un style flexible.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
breadcrumbBaseConteneur de navigation pour le fil d'Ariane
breadcrumb-listModificateurListe ordonnée des éléments du fil d'Ariane
breadcrumb-itemModificateurÉlément de liste individuel dans le fil d'Ariane
breadcrumb-linkModificateurÉlément d'ancrage stylisé sous forme de lien de fil d'Ariane
breadcrumb-separatorModificateurÉlément séparateur entre les éléments
breadcrumb-currentModificateurMarque l'élément de page actuel (actif)

Utilisation de base

Si aucun séparateur n’est fourni, une flèche s’affiche automatiquement entre les éléments du fil d’Ariane.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

Séparateurs de fil d'Ariane

Fil d'Ariane avec séparateur de texte

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>

Fil d'Ariane avec séparateur d'icônes

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>

Accessibilité du fil d'Ariane

Pour garantir que le fil d'Ariane est accessible aux lecteurs d'écran :

  • Enveloppez la structure dans un élément <nav> avec un aria-label="Breadcrumb".
  • Le dernier élément (page actuelle) doit utiliser aria-current="page" et être de préférence un <span> plutôt qu'un lien.
  • Les séparateurs doivent être ignorés par les lecteurs d'écran (souvent gérés via CSS ou aria-hidden="true" si vous utilisez un élément physique).

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Fil d'Ariane sur demande. Fini les cours hallucinés.

Essayez Cherry MCP