breadcrumbs

Accessible breadcrumb navigation. The current page item renders as a <span> with aria-current="page"; all preceding items render as links.

Basic

breadcrumbs({
  items: [
    { label: 'Home',     href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Sneakers' },
  ],
})

Longer trail

breadcrumbs({
  items: [
    { label: 'Home',     href: '/' },
    { label: 'Shop',     href: '/shop' },
    { label: 'Footwear', href: '/shop/footwear' },
    { label: 'Sneakers', href: '/shop/footwear/sneakers' },
    { label: 'Air Max 90' },
  ],
})

Custom separator

breadcrumbs({
  separator: '›',
  items: [
    { label: 'Docs',       href: '/docs' },
    { label: 'Components', href: '/docs/components' },
    { label: 'Breadcrumbs' },
  ],
})

Prop	Type	Default
`items`	array	[]	Array of `{ label, href }`. The last item should have no `href` — it becomes the current page.
`separator`	string	'/'	Character rendered between items
`class`	string	—