Breadcrumb (Fil d'Ariane)

Le breadcrumb (fil d'Ariane) est une barre de navigation secondaire qui affiche la hiérarchie de la page en cours. Il aide le visiteur a se repérer dans la structure de votre boutique et facilite la navigation vers les pages parentes. Scale Theme génère automatiquement le breadcrumb à partir de la structure de votre boutique.

Generation automatique

Le breadcrumb détecte automatiquement le type de page et construit la hiérarchie appropriee. Aucune configuration manuelle des chemins n'est nécessaire.

Chemins par type de page

Logique de detection pour les produits

Sur une page produit, la collection affichée dans le breadcrumb suit cette logique de priorite :

Pages ou le breadcrumb n'apparaît PAS

Le breadcrumb est automatiquement masqué sur certaines pages ou il n'a pas de sens :

Configuration

Texte de l'accueil

Le premier élément du breadcrumb est toujours le lien vers l'accueil. Vous pouvez personnaliser le texte affiché (par défaut "Home") et le lien de destination.

Taille de police

Ajustez la taille du texte du breadcrumb pour l'integrer harmonieusement avec le design de vos pages.

Séparateurs

Le caractère entre chaque niveau du breadcrumb est configurable :

Exemples visuels

Style de la page active

Le dernier élément du breadcrumb (la page en cours) peut être affiche en gras pour le distinguer visuellement des liens parents. L'attribut aria-current="page" est appliqué automatiquement.

SEO et données structurées

Le breadcrumb génère automatiquement des données structurées Schema.org (BreadcrumbList) pour améliorer votre référencement. Chaque élément inclut :

• itemprop="itemListElement" avec itemtype="https://schema.org/ListItem"
• itemprop="position" pour l'ordre dans la hiérarchie
• itemprop="item" pour l'URL de l'élément

Rendu schema.org

Le balisage HTML inclut les microdata Schema.org directement :

<nav role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/">Accueil</a>
      <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/collections/robes">Robes</a>
      <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement">
      <a href="/products/robe-noire" aria-current="page" itemprop="item">
        Robe longue noire
      </a>
      <meta itemprop="position" content="3">
    </li>
  </ol>
</nav>

Palette de couleurs et espacement

Le breadcrumb hérité des settings globaux de section :

Les liens du breadcrumb utilisent la couleur de premier plan de la palette sélectionnée (--color-foreground).

Accessibilité

Le breadcrumb respecte les standards d'accessibilité :

Troncature des titres

Sur les pages produit, les titres longs sont automatiquement tronques a 80 caractères pour éviter que le breadcrumb ne prenne trop de place.

Bonnes pratiques

1. Gardez-le actif : Le breadcrumb est un standard de navigation web. Les visiteurs s'attendent a le trouver, surtout sur les boutiques avec un catalogue important
2. SEO : Les données structurées générées améliorent votre référencement. Ne désactivez pas le breadcrumb uniquement pour des raisons esthétiques
3. Collections organisées : Le breadcrumb est d'autant plus utile que votre structure de collections est logique et hierarchique
4. Noms courts : Des noms de collections et de produits courts rendent le breadcrumb plus lisible, surtout sur mobile
5. Texte d'accueil : Utilisez "Accueil" ou le nom de votre marque plutôt que l'URL de votre site
6. Séparateur adapte : Le chevron > est le plus reconnaissable. La flèche -> donne un look plus moderne

Résumé des settings

Prochaines étapes

• Header — Le header qui contient le fil d'Ariane
• Page collection — Pages où le breadcrumb est le plus utile
• Configuration initiale — Paramètres globaux du thème
• Recherche prédictive — Autre outil de navigation