Breadcrumb

I breadcrumb dicono dove sta una pagina. L’ultimo elemento è la pagina corrente: viene renderizzato come semplice testo e marcato aria-current="page", perché un link alla pagina su cui sei già è rumore.

breadcrumbs({
  items: [
    { label: 'Home', href: '/' },
    { label: 'Documentazione', href: '/docs' },
    { label: 'Routing' },
  ],
})

Separatore

Qualunque stringa o markup. In ogni caso i separatori sono nascosti agli screen reader.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Home', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Breadcrumb' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Home', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Breadcrumb' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Home', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Breadcrumb' }],
  }),
)

Semplici stringhe

Un elemento senza href è solo testo, ovunque compaia — non soltanto alla fine.

breadcrumbs({
  items: ['Home', 'Archivio', '2026', 'Marzo'],
})

A partire da un percorso

Su un sito statico la scia si ricava di solito dalla rotta, non la si scrive a mano.

return (() => {
  const path = '/docs/guides/routing'
  const segments = path.split('/').filter(Boolean)

  return breadcrumbs({
    items: [
      { label: 'Home', href: '/' },
      ...segments.map((segment, index) => ({
        label: segment.replace(/-/g, ' '),
        href: index === segments.length - 1 ? undefined : '/' + segments.slice(0, index + 1).join('/'),
      })),
    ],
  })
})()

Dare un nome alla nav

L’insieme è un <nav> con un nome accessibile, così uno screen reader può saltarci sopra. Cambia il nome con label quando una pagina ha più di un punto di riferimento di navigazione.

breadcrumbs({
  label: 'Breadcrumb della documentazione',
  items: [{ label: 'Documentazione', href: '/docs' }, { label: 'Componenti' }],
})

Props

Prop	Tipo	Predefinito	Descrizione
`items`	`Array`	`[]`	Stringhe, oppure oggetti { label, href }. L’ultimo è la pagina corrente.
`separator`	`Child`	`'/'`	Disegnato fra gli elementi, nascosto agli screen reader.
`label`	`string`	`'Breadcrumb'`	Nome accessibile del punto di riferimento nav.