Fil d'Ariane

Navigation de chemin hiérarchique. Basé sur la sémantique native nav + ol, la page courante est automatiquement marquée aria-current="page" et n'est pas cliquable ; séparateur personnalisé et repli en cas de dépassement sont pris en charge.

Utilisation de base

Utilisation de base

1. Accueil
2. Composants
3. Breadcrumb

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem>Composants</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb>
    <LhBreadcrumbItem>Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem>Composants</LhBreadcrumbItem>
    <LhBreadcrumbItem>Breadcrumb</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Navigation par liens

Navigation par liens

1. Accueil
2. Guide
3. Page actuelle

Mode replace

1. Remplacer l'historique
2. Page actuelle

<script setup lang="ts">
</script>

<template>
  <!-- Navigation par liens -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">Guide</LhBreadcrumbItem>
    <LhBreadcrumbItem>Page actuelle</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- Mode replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Remplacer l'historique</LhBreadcrumbItem>
    <LhBreadcrumbItem>Page actuelle</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <!-- Navigation par liens -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/guide">Guide</LhBreadcrumbItem>
    <LhBreadcrumbItem>Page actuelle</LhBreadcrumbItem>
  </LhBreadcrumb>
  <!-- Mode replace -->
  <LhBreadcrumb>
    <LhBreadcrumbItem to="/" replace>Remplacer l'historique</LhBreadcrumbItem>
    <LhBreadcrumbItem>Page actuelle</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Les items recevant to sont rendus en <a> ; lorsque vue-router est détecté, la navigation se fait par le routeur (replace contrôle le remplacement de l'historique), sinon la navigation native est conservée. Le dernier item est toujours rendu sous forme de texte représentant la page courante.

Séparateur personnalisé

Séparateur personnalisé

1. Accueil
2. Composants
3. Séparateur dédié

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">Composants</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Séparateur dédié
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb separator="·">
    <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/components">Composants</LhBreadcrumbItem>
    <LhBreadcrumbItem>
      <template #separator>➜</template>
      Séparateur dédié
    </LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Repli en cas de dépassement

Repli en cas de dépassement

1. Accueil
2. Dossier A
3. Sous-dossier B
4. Sous-dossier C
5. Page actuelle

<script setup lang="ts">
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Dossier A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Sous-dossier B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Sous-dossier C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Page actuelle</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

<script>
export default {}
</script>

<template>
  <LhBreadcrumb :max-items="3">
    <LhBreadcrumbItem to="/">Accueil</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a">Dossier A</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b">Sous-dossier B</LhBreadcrumbItem>
    <LhBreadcrumbItem to="/a/b/c">Sous-dossier C</LhBreadcrumbItem>
    <LhBreadcrumbItem>Page actuelle</LhBreadcrumbItem>
  </LhBreadcrumb>
</template>

Au-delà de maxItems, le premier item, des points de suspension et les derniers items sont conservés ; cliquez sur les points de suspension pour tout déplier.

Breadcrumb API

Props

Propriété	Description	Type	Valeur par défaut
separator	Caractère séparateur	string	'/'
maxItems	Nombre maximal d'items visibles (premier item + points de suspension + derniers items), repli au-delà	number	0
sx	Propriétés de mise en page rapide sx	LhSxProps	—

LhBreadcrumbItem Props

Propriété	Description	Type	Valeur par défaut
to	Adresse de navigation ; rendu sous forme de lien si présent et hors dernier item	string	—
replace	Utiliser le mode replace lors de la navigation via vue-router	boolean	false

Slots

Slot	Description	Composant concerné
default	Items du fil d'Ariane	LhBreadcrumb
default	Contenu de l'item	LhBreadcrumbItem
separator	Séparateur personnalisé (remplace le separator global)	LhBreadcrumbItem

Accessibilité

• L'élément racine est un <nav aria-label> (libellé issu du pack de langue breadcrumb.label) enveloppant un <ol>, l'ordre sémantique correspond à l'ordre du document
• La page courante (dernier item) est rendue en texte et reçoit automatiquement aria-current="page", sans possibilité de clic même si to est renseigné
• Le séparateur est aria-hidden="true", il n'entre pas dans l'arbre d'accessibilité
• Les points de suspension de repli sont un véritable <button>, dont l'aria-label est issu du pack de langue breadcrumb.more ; un clic déplie l'ensemble

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/breadcrumb/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhBreadcrumbProps

export interface LhBreadcrumbProps {
  /** Caractère séparateur */
  separator?: string
  /** Nombre maximal d'items visibles (premier item + points de suspension + derniers items), repli au-delà ; 0 ou absent signifie aucun repli */
  maxItems?: number
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhBreadcrumbItemProps

export interface LhBreadcrumbItemProps {
  /** Adresse de navigation ; rendu sous forme de lien si présent et hors dernier item (navigation par le routeur lorsque vue-router est détecté, sinon navigation native) */
  to?: string
  /** Utiliser le mode replace lors de la navigation via vue-router (sans effet en l'absence de routeur) */
  replace?: boolean
}