DMleadgen
3cb8d3cb3f
- Schema.org JSON-LD templates (product, event, local-business, faq) - Brand, UI, SEO, and decision guide rules - Working code snippets (vendor-card, schema-inject, deploy-webhook) - JSON schemas for project config validation - Client presets (slc-bride, default) - Self-update protocol with changelog tracking Made-with: Cursor
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import Link from 'next/link'
|
|
import { ChevronRight, Home } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface BreadcrumbItem {
|
|
label: string
|
|
href?: string
|
|
}
|
|
|
|
interface BreadcrumbProps {
|
|
items: BreadcrumbItem[]
|
|
className?: string
|
|
}
|
|
|
|
export function Breadcrumb({ items, className }: BreadcrumbProps) {
|
|
// Generate JSON-LD structured data for SEO
|
|
const structuredData = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: items.map((item, index) => ({
|
|
'@type': 'ListItem',
|
|
position: index + 1,
|
|
name: item.label,
|
|
item: item.href ? `${process.env.NEXT_PUBLIC_SITE_URL}${item.href}` : undefined,
|
|
})),
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Inject structured data */}
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
|
|
/>
|
|
|
|
{/* Visible breadcrumb */}
|
|
<nav aria-label="Breadcrumb" className={cn('flex items-center text-sm', className)}>
|
|
<ol className="flex items-center gap-2">
|
|
<li>
|
|
<Link
|
|
href="/"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label="Home"
|
|
>
|
|
<Home className="h-4 w-4" />
|
|
</Link>
|
|
</li>
|
|
{items.map((item, index) => (
|
|
<li key={item.href || index} className="flex items-center gap-2">
|
|
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
|
{item.href && index < items.length - 1 ? (
|
|
<Link
|
|
href={item.href}
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span className="text-foreground font-medium" aria-current="page">
|
|
{item.label}
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|
|
|
|
// Usage example:
|
|
// <Breadcrumb
|
|
// items={[
|
|
// { label: 'Vendors', href: '/vendors' },
|
|
// { label: 'Photography', href: '/vendors/photography' },
|
|
// { label: 'John Smith Photography' }, // Current page - no href
|
|
// ]}
|
|
// />
|