Breadcrumbs

Breadcrumbs are frequently a good idea to include if the page the user is on is three or more levels deep. See Nielsen Norman Group's post for design guidelines.
Note: The last item in the breadcrumbs should be the page the user is currently on and so it isn't clickable as a link.
Source code
import { Breadcrumbs } from "rfui-package";

#Basic

<Breadcrumbs
  links={[
    { title: "One", href: "/one" },
    { title: "Two", href: "/two" },
    { title: "Three", href: "/three" },
  ]}
/>

#Size

<Stack className="gap-6">
  <Breadcrumbs
    size="sm"
    links={[
      { title: "One", href: "/one" },
      { title: "Two", href: "/two" },
      { title: "Three", href: "/three" },
    ]}
  />
  <Breadcrumbs
    size="md"
    links={[
      { title: "One", href: "/one" },
      { title: "Two", href: "/two" },
      { title: "Three", href: "/three" },
    ]}
  />
  <Breadcrumbs
    size="lg"
    links={[
      { title: "One", href: "/one" },
      { title: "Two", href: "/two" },
      { title: "Three", href: "/three" },
    ]}
  />
  <Breadcrumbs
    size="xl"
    links={[
      { title: "One", href: "/one" },
      { title: "Two", href: "/two" },
      { title: "Three", href: "/three" },
    ]}
  />
</Stack>

#Props

PropRequiredDefaultType and notes
links-
BreadcrumbLink[]
The type for BreadcrumbLink is:
type BreadcrumbLink = {
  title: string;
  href: string;
};
size-"sm"
"sm" | "md" | "lg" | "xl"
...rest--
ComponentProps<"nav">
See the docs for rest parameters. For Breadcrumbs, you could pass anything you normally would pass to <nav> because the container looks something like this:
<nav className={className} {...restWithoutClass}>
  {children}
</nav>