Migalhas

As migalhas dizem onde uma página assenta. O último item é a página atual: é desenhado como texto simples e marcado com aria-current="page", porque uma ligação para a página onde já estás é ruído.

Migalhas básicas

breadcrumbs({
  items: [
    { label: 'Início', href: '/' },
    { label: 'Documentação', href: '/docs' },
    { label: 'Rotas' },
  ],
})

Separador

Qualquer cadeia ou marcação. Em qualquer dos casos os separadores ficam escondidos dos leitores de ecrã.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Início', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Migalhas' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Início', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Migalhas' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Início', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Migalhas' }],
  }),
)

Cadeias simples

Um item sem href é apenas texto, apareça onde aparecer — não só no fim.

breadcrumbs({
  items: ['Início', 'Arquivo', '2026', 'Março'],
})

A partir de um caminho

Num site estático o rasto costuma ser derivado da rota, e não escrito à mão.

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

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

Dar nome ao nav

O conjunto todo é um <nav> com nome acessível, para um leitor de ecrã poder saltar até lá. Muda o nome com label quando uma página tiver mais do que um marco de navegação.

breadcrumbs({
  label: 'Migalhas da documentação',
  items: [{ label: 'Documentação', href: '/docs' }, { label: 'Componentes' }],
})

Props

Prop	Tipo	Predefinição	Descrição
`items`	`Array`	`[]`	Cadeias, ou objetos { label, href }. O último é a página atual.
`separator`	`Child`	`'/'`	Desenhado entre os itens, escondido dos leitores de ecrã.
`label`	`string`	`'Breadcrumb'`	Nome acessível do marco nav.