Navigation

Breadcrumb

Navigazione a briciole di pane per indicare la posizione dell'utente nella gerarchia dell'applicazione. Supporta router-link, link esterni, icone, severity e dimensioni.

Import

import { Breadcrumb } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`model`	`MenuItem[]`	`[]`	Array di MenuItem che rappresentano il percorso breadcrumb
`home`	`MenuItem`	`undefined`	Elemento home preposto all'inizio del breadcrumb
`ariaLabel`	`string`	`undefined`	Label ARIA per l'elemento `<nav>`
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label ARIA
`severity`	`Severity`	`undefined`	Colore severity per i link (`primary`, `secondary`, `success`, `info`, `warn`, `danger`, `help`, `contrast`)
`size`	`Size`	`'medium'`	Dimensione del breadcrumb (`small`, `medium`, `large`)

Emits

Il componente non emette eventi propri. Le azioni sui singoli item vengono gestite tramite la proprietà command di MenuItem.

Slot

Slot	Scope	Descrizione
`item`	`{ item: MenuItem; props: Record<string, unknown> }`	Template personalizzato per ogni elemento del breadcrumb
`separator`	—	Template personalizzato per il separatore tra gli elementi (default: chevron SVG)
`itemicon`	`{ item: MenuItem; class: string }`	Template personalizzato per l'icona dell'elemento

Esempi

Con icone personalizzate

Slot item personalizzato

Separatore personalizzato

Con severity

Comportamento

L'ultimo elemento del breadcrumb viene reso come <span aria-current="page"> (non cliccabile).
Gli elementi con to vengono resi come <RouterLink>.
Gli elementi con url vengono resi come <a>. Se target="_blank", viene aggiunto automaticamente rel="noopener noreferrer".
Gli elementi con visible: false vengono nascosti.
L'elemento home viene sempre preposto agli elementi di model.

Accessibilità

Usa <nav role="navigation"> con aria-label configurabile.
L'elemento corrente (ultimo) riceve aria-current="page".
Il separatore SVG ha aria-hidden="true".

TypeScript

import type { BreadcrumbProps, BreadcrumbSlots } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

Feedback

Componenti di feedback visivo — Badge, Tag, Chip, Avatar, Message, Toast, ProgressBar, ProgressSpinner, Skeleton, Tooltip, EmptyState.

ContextMenu

Menu contestuale attivato dal click destro del mouse. Supporta submenu annidati, modalità globale per tutto il documento, attivazione programmatica e posizionamento automatico con rilevamento bordi.