components Breadcrumbs.tsx

100% Statements 4/4

100% Branches 8/8

100% Functions 2/2

100% Lines 3/3

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  
 
 
 
 
 
 
 
 
 
60x
43x
 
 
84x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import Link from 'next/link';
import { Fragment } from 'react';
 
export interface Crumb {
  name: string;
  /** Omitted for crumbs with no page of their own (label groups). */
  url?: string;
}
 
export function Breadcrumbs({ items }: { items: Crumb[] }) {
  if (!items.length) return null;
  return (
    <nav className="breadcrumbs" aria-label="Breadcrumb">
      {items.map((crumb, index) => (
        <Fragment key={`${crumb.url ?? crumb.name}-${index}`}>
          {index > 0 && (
            <span className="breadcrumbs__sep" aria-hidden="true">
              /
            </span>
          )}
          {crumb.url ? (
            <Link href={crumb.url} className="breadcrumbs__link">
              {crumb.name}
            </Link>
          ) : (
            <span className="breadcrumbs__label">{crumb.name}</span>
          )}
        </Fragment>
      ))}
    </nav>
  );
}