# All files / src/components/display Breadcrumbs.tsx

0% Statements 0/28
100% Branches 1/1
100% Functions 1/1
0% Lines 0/28

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>
      );
    }