components/breadcrumb/breadcrumb.react.tsx

Functions

Imports

It imports components/breadcrumb/breadcrumb.ts, components/popover/popover.react.tsx. Imported by components/page-head/page-head.react.tsx.

Source

1import type { ReactNode } from "react";
2import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.react.tsx";
3import { foldedLevels } from "./breadcrumb.ts";
4
5export interface BreadcrumbItem {
6  label: string;
7  // Every level but the last is a link. The last is the current page, as text.
8  href?: string;
9}
10
11export interface BreadcrumbProps {
12  // The trail, first level to current page. Fewer than two levels renders nothing: a hub has
13  // no trail to show.
14  items: BreadcrumbItem[];
15  // Keep the first level and the last (maxItems - 1); the rest fold into a popover of links.
16  maxItems?: number;
17  label?: string;
18  // Draw a level's link with the app's router link: receives the class and the content.
19  renderLink?: (props: { href: string; className: string; children: ReactNode }) => ReactNode;
20}
21
22const Dots = () => (
23  <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
24    <circle cx="3" cy="8" r="1.4" fill="currentColor" />
25    <circle cx="8" cy="8" r="1.4" fill="currentColor" />
26    <circle cx="13" cy="8" r="1.4" fill="currentColor" />
27  </svg>
28);
29
30// The HTML contract in breadcrumb.md. A long trail renders its folded item at once, popover
31// included, so the server's HTML already has the links.
32export function Breadcrumb({ items, maxItems, label = "Breadcrumb", renderLink }: BreadcrumbProps) {
33  if (items.length < 2) return null;
34  const folded = new Set(maxItems ? foldedLevels(items.length, maxItems) : []);
35  const link = (item: BreadcrumbItem, className: string) =>
36    renderLink ? renderLink({ href: item.href ?? "#", className, children: item.label }) : (
37      <a className={className} href={item.href}>
38        {item.label}
39      </a>
40    );
41  return (
42    <nav className="cap-breadcrumb" aria-label={label}>
43      <ol className="cap-breadcrumb-list">
44        {items.map((item, i) => {
45          if (folded.has(i)) {
46            if (i !== Math.min(...folded)) return null;
47            const hidden = items.filter((_, j) => folded.has(j));
48            return (
49              <li className="cap-breadcrumb-item" data-collapsed="" key={`fold-${i}`}>
50                <Popover>
51                  <PopoverTrigger className="cap-breadcrumb-ellipsis" aria-label={`Show ${hidden.length} more levels`}>
52                    <Dots />
53                  </PopoverTrigger>
54                  <PopoverContent aria-label="More levels" side="bottom" align="start" size="auto" data-flush="">
55                    <ul className="cap-breadcrumb-more">
56                      {hidden.map((h) => (
57                        <li key={`${h.href}-${h.label}`}>{link(h, "cap-breadcrumb-more-link")}</li>
58                      ))}
59                    </ul>
60                  </PopoverContent>
61                </Popover>
62              </li>
63            );
64          }
65          const last = i === items.length - 1;
66          return (
67            <li className="cap-breadcrumb-item" key={`${item.href}-${i}`}>
68              {last ? (
69                <span className="cap-breadcrumb-page" aria-current="page">
70                  {item.label}
71                </span>
72              ) : (
73                link(item, "cap-breadcrumb-link")
74              )}
75            </li>
76          );
77        })}
78      </ol>
79    </nav>
80  );
81}