Fil d'Ariane

Le chemin de retour depuis la page consultée. Il est piloté par les données : une seule liste de segments, et le segment courant se déduit de l'adresse plutôt que d'être marqué à la main.

Utilisation

vue

<script setup lang="ts">
import { VBreadcrumb } from 'vectis-ui'

const items = [
  { label: 'Home', href: '/app' },
  { label: 'Projects', href: '/app/projects' },
  { label: 'Vectis UI', href: '/app/projects/vectis-ui' },
]
</script>

<template>
  <VBreadcrumb :items="items" current-path="/app/projects/vectis-ui" />
</template>

Exemples

Séparateur personnalisé

separatorIcon remplace le chevron dessiné entre deux segments, et accepte toute valeur d'icône.

vue

<script setup lang="ts">
import { VBreadcrumb } from 'vectis-ui'
import { arrow_right_alt as arrowRightAlt } from 'vectis-ui/icons'

import slash from '~/assets/img/breadcrumb-slash.svg'

const items = [
  { label: 'Home', href: '/app' },
  { label: 'Projects', href: '/app/projects' },
  { label: 'Vectis UI', href: '/app/projects/vectis-ui' },
]
</script>

<template>
  <VBreadcrumb
    :items="items"
    current-path="/app/projects/vectis-ui"
    :separator-icon="arrowRightAlt"
    label="Trail with an icon separator"
  />

  <VBreadcrumb
    :items="items"
    current-path="/app/projects/vectis-ui"
    :separator-icon="{ src: slash }"
    label="Trail with an image separator"
  />
</template>

Avec des icônes

Chaque segment accepte une icon, décorative à côté du libellé que lit un lecteur d'écran.

vue

<script setup lang="ts">
import { VBreadcrumb } from 'vectis-ui'
import {
  cloud_upload as cloudUpload,
  picture_as_pdf as pictureAsPdf,
  table_chart as tableChart,
} from 'vectis-ui/icons'

const items = [
  { label: 'Uploads', href: '/app/files', icon: cloudUpload },
  { label: 'Reports', href: '/app/files/reports', icon: tableChart },
  { label: 'Third quarter', href: '/app/files/reports/q3', icon: pictureAsPdf },
]
</script>

<template>
  <VBreadcrumb :items="items" current-path="/app/files/reports/q3" />
</template>

Troncature

Au-delà de maxItems, le fil garde son premier segment et ses deux derniers, et replie le reste derrière des points de suspension qui ouvrent un menu des segments masqués.

vue

<script setup lang="ts">
import { VBreadcrumb } from 'vectis-ui'

const items = [
  { label: 'Home', href: '/app' },
  { label: 'Projects', href: '/app/projects' },
  { label: 'Vectis UI', href: '/app/projects/vectis-ui' },
  { label: 'Components', href: '/app/projects/vectis-ui/components' },
  { label: 'Breadcrumb', href: '/app/projects/vectis-ui/components/breadcrumb' },
  { label: 'Accessibility', href: '/app/projects/vectis-ui/components/breadcrumb/a11y' },
]
</script>

<template>
  <VBreadcrumb
    :items="items"
    current-path="/app/projects/vectis-ui/components/breadcrumb/a11y"
    :max-items="4"
  />
</template>

API

Props

Prop	Type	Défaut
`items`	`BreadcrumbItem[]`	aucune
Les segments du fil, ordonnés du plus général au plus profond.
`label`	`string`	aucune
Le nom que les lecteurs d'écran annoncent pour cette navigation. Il retombe sur le dictionnaire du design system, dans la langue courante.
`currentPath`	`string`	aucune
L'adresse de la page affichée. Le segment dont le `href` lui correspond est le segment courant, même replié dans le menu. Une barre oblique finale, une requête ou une ancre d'un côté ou de l'autre ne changent rien : le chemin complet d'un routeur peut être passé tel quel.
`separatorIcon`	`IconSource`	`chevron_right`
L'icône dessinée entre deux segments. Elle est retournée dans une page de droite à gauche.
`maxItems`	`number`	aucune
La longueur au-delà de laquelle le fil se replie : il ne reste que le premier segment, un bouton de points de suspension et les deux derniers, le bouton ouvrant un menu qui liste les seuls segments masqués. En dessous de 3 il n'y aurait plus rien à replier : 3 est donc le minimum effectif.
`ellipsisLabel`	`string`	aucune
Le nom que les lecteurs d'écran annoncent pour le bouton de points de suspension. Il retombe sur le dictionnaire du design system.

Types

Les types que les tables ci-dessus nomment, écrits comme la librairie les déclare. Ceux qui portent export s'importent depuis vectis-ui pour typer votre propre code ; les autres décrivent la forme de ce qu'un slot fournit.

export interface BreadcrumbItem {
  label: string
  href: string
  icon?: IconSource
}

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender