Breadcrumb trail
A wrapping breadcrumb path with native links, a named navigation landmark and a clear current location.
Implementation
1import type { HTMLAttributes, ReactNode } from "react";2import { ChevronRight } from "lucide-react";3 4export type BreadcrumbItem = { label: string; href?: string; icon?: ReactNode };5export type BreadcrumbTrailProps = HTMLAttributes<HTMLElement> & {6 items: BreadcrumbItem[];7 label?: string;8};9 10/** Hierarchical links with a labelled navigation landmark and one current page. */11export function BreadcrumbTrail({12 items,13 label = "Breadcrumb",14 className = "",15 ...navProps16}: BreadcrumbTrailProps) {17 if (!items.length) return null;18 return (19 <nav20 {...navProps}21 className={`breadcrumb-trail ${className}`}22 aria-label={navProps["aria-label"] ?? label}23 >24 <ol>25 {items.map((item, index) => {26 const current = index === items.length - 1;27 const content = (28 <>