Breadcrumbs

Accessible breadcrumb navigation with chevron separators, optional JSON-LD BreadcrumbList schema markup for SEO, and an aria-current=page marker on the last item. Pass an array of items with label and optional href.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Breadcrumbs to your project and fits it to your theme.

import Breadcrumbs from '@/components/ui/breadcrumbs'

export default function Demo() {
  return (
    <div className="bg-white">
      <Breadcrumbs
        siteUrl="https://example.com"
        items={[
          { label: 'Home', href: '/' },
          { label: 'Diensten', href: '/diensten' },
          { label: 'Schilderwerk' },
        ]}
      />
    </div>
  )
}