Migas de pan

Las migas de pan dicen dónde se sitúa una página. El último elemento es la página actual: se dibuja como texto plano y se marca con aria-current="page", porque un enlace a la página en la que ya estás es ruido.

Migas básicas

breadcrumbs({
  items: [
    { label: 'Inicio', href: '/' },
    { label: 'Documentación', href: '/docs' },
    { label: 'Rutas' },
  ],
})

Separador

Cualquier cadena o marcado. En todos los casos los separadores quedan ocultos a los lectores de pantalla.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Inicio', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Migas de pan' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Inicio', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Migas de pan' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Inicio', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Migas de pan' }],
  }),
)

Cadenas simples

Un elemento sin href es solo texto, esté donde esté — no únicamente al final.

breadcrumbs({
  items: ['Inicio', 'Archivo', '2026', 'Marzo'],
})

A partir de una ruta

En un sitio estático el rastro suele deducirse de la ruta, no escribirse a mano.

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

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

Etiquetar el nav

Todo el conjunto es un <nav> con nombre accesible, así que un lector de pantalla puede saltar hasta él. Cambia el nombre con label cuando una página tenga más de un punto de referencia de navegación.

breadcrumbs({
  label: 'Migas de la documentación',
  items: [{ label: 'Documentación', href: '/docs' }, { label: 'Componentes' }],
})

Props

Prop	Tipo	Por defecto	Descripción
`items`	`Array`	`[]`	Cadenas, u objetos { label, href }. El último es la página actual.
`separator`	`Child`	`'/'`	Se dibuja entre elementos, oculto a los lectores de pantalla.
`label`	`string`	`'Breadcrumb'`	Nombre accesible del punto de referencia nav.