Navigation

Fil d'Ariane

nouveauClasses hb-breadcrumbVuetify 2 v-breadcrumbsVuetify 3 v-breadcrumbs

Quand l'utiliser

Quand une page est à deux niveaux ou plus sous une entrée de navigation : Achats › Factures › Pomona du 12/10. À un seul niveau, le titre suffit ; sur téléphone, seul le parent s'affiche en « ‹ Factures ».

Facture Pomona du 12/10/2026

Code

<div class="hb-stack" style="gap:var(--space-1)">
  <ol class="hb-breadcrumb"><li><a href="#">Achats</a></li><li><a href="#">Factures</a></li><li aria-current="page">Pomona · 12/10/2026</li></ol>
  <h1 class="hb-page-title">Facture Pomona du 12/10/2026</h1>
</div>

Accessibilité

Un <ol> dans un <nav aria-label="Fil d'Ariane"> ; la page courante porte aria-current="page" et n'est pas un lien. Le séparateur est en CSS, non lu par le lecteur d'écran.