Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | import type { JSX } from "react";
import { ChevronRight } from "lucide-react";
import { Link } from "react-router";
import type { BreadcrumbSegment } from "../../utils/breadcrumbs.js";
import { ICON_SM } from "../../utils/iconSize.js";
import styles from "./Breadcrumbs.module.scss";
/** Props for the Breadcrumbs component. */
interface BreadcrumbsProps {
segments: BreadcrumbSegment[];
}
/** Renders a clickable breadcrumb trail from a list of segments. */
export function Breadcrumbs({ segments }: BreadcrumbsProps): JSX.Element {
return (
<nav className={styles.breadcrumbs} aria-label="Breadcrumb" data-testid="breadcrumbs">
<ol className={styles.list}>
{segments.map((segment, index) => {
const isLast = index === segments.length - 1;
return (
<li key={index} className={styles.item}>
{index > 0 && (
<span className={styles.separator} aria-hidden="true">
<ChevronRight size={ICON_SM} />
</span>
)}
{segment.url && !isLast ? (
<Link className={styles.link} to={segment.url} title={segment.label}>
{segment.label}
</Link>
) : (
<span className={styles.current} aria-current="page" title={segment.label}>
{segment.label}
</span>
)}
</li>
);
})}
</ol>
</nav>
);
}
|