Trail

tcmts.share.Trail · #gjnxkpsf · term · runs anywhere

Where a page is, as links up to it (React Aria's Breadcrumbs); the last is the page itself.

import { Breadcrumb, Breadcrumbs, Link } from "react-aria-components";

export function Trail({ items }: { items: { label: string; href?: string }[] }) {
  return (
    <Breadcrumbs className="trail">
      {items.map((x, i) => (
        <Breadcrumb key={`${i} ${x.label}`} id={i} className="trail-item">
          {x.href && i < items.length - 1 ? (
            <Link href={x.href}>{x.label}</Link>
          ) : (
            <span className="here">{x.label}</span>
          )}
        </Breadcrumb>
      ))}
    </Breadcrumbs>
  );
}

used by