// @design-system: layout/Breadcrumb
// Registered at /design-system#breadcrumb-layout
import { cn } from '@/lib/cn';
export interface BreadcrumbItem {
/** Display label for this crumb. */
label: string;
/** If provided and not the last item, renders as a link. */
href?: string;
/** Mark as DB-sourced user content so i18n checks skip it. */
userContent?: boolean;
}
export interface BreadcrumbProps {
/** Ordered list of crumbs - home first, current page last. */
items: BreadcrumbItem[];
/** aria-label for the nav landmark. */
ariaLabel?: string;
className?: string;
/**
* `default` — white surface bar with bottom border (standard page use).
* `hero-overlay` — frosted-glass pill floating over a hero image.
*/
variant?: 'default' | 'hero-overlay';
}
/**
* Breadcrumb - site-path navigation trail.
*
* - Renders nothing when fewer than 2 items (no trail to show).
* - RTL-aware: uses `/` separator (direction-neutral).
* - Last item is `aria-current="page"` and not linked.
* - WCAG 2.4.8 - location within a set of pages.
*
* @example
* ```tsx
*
* ```
*/
export function Breadcrumb({
items,
ariaLabel = 'breadcrumb',
className,
variant = 'default',
}: BreadcrumbProps) {
if (items.length < 2) return null;
const isOverlay = variant === 'hero-overlay';
return (
);
}