Breadcrumbs

import { BreadcrumbItem, Breadcrumbs, HomeIcon } from "@rdloom/react";

// An icon before the first step. The text still names it, so the icon is decorative.
export default function BreadcrumbsWithIconExample() {
  return (
    <div className="flex w-full justify-center">
      <Breadcrumbs>
        <BreadcrumbItem href="/" icon={<HomeIcon />}>
          Home
        </BreadcrumbItem>
        <BreadcrumbItem href="/invoices">Invoices</BreadcrumbItem>
        <BreadcrumbItem>INV-2041</BreadcrumbItem>
      </Breadcrumbs>
    </div>
  );
}

import { BreadcrumbItem, Breadcrumbs } from "@rdloom/react";

export default function BreadcrumbsSlashSeparatorExample() {
  return (
    <div className="flex w-full justify-center">
      <Breadcrumbs separator="slash">
        <BreadcrumbItem href="/">Home</BreadcrumbItem>
        <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
        <BreadcrumbItem>Billing</BreadcrumbItem>
      </Breadcrumbs>
    </div>
  );
}

import { BreadcrumbItem, Breadcrumbs } from "@rdloom/react";

const dot = <span className="size-1 rounded-full bg-current" />;

// Any mark can go between steps. Give each item the same `separator` to keep the trail even.
export default function BreadcrumbsCustomSeparatorExample() {
  return (
    <div className="flex w-full justify-center">
      <Breadcrumbs>
        <BreadcrumbItem href="/" separator={dot}>
          Home
        </BreadcrumbItem>
        <BreadcrumbItem href="/reports" separator={dot}>
          Reports
        </BreadcrumbItem>
        <BreadcrumbItem>Quarterly sales</BreadcrumbItem>
      </Breadcrumbs>
    </div>
  );
}

import { BreadcrumbEllipsis, BreadcrumbItem, Breadcrumbs } from "@rdloom/react";

// The middle of a long trail sits behind one button. Its steps open as a menu of links.
export default function BreadcrumbsCollapsedExample() {
  return (
    <div className="flex w-full justify-center">
      <Breadcrumbs label="You are here">
        <BreadcrumbItem href="/">Home</BreadcrumbItem>
        <BreadcrumbEllipsis
          items={[
            { label: "Documentation", href: "/docs" },
            { label: "Components", href: "/docs/components" },
            { label: "Forms", href: "/docs/components/forms" },
          ]}
        />
        <BreadcrumbItem href="/docs/components/forms/inputs">Inputs</BreadcrumbItem>
        <BreadcrumbItem>Number field</BreadcrumbItem>
      </Breadcrumbs>
    </div>
  );
}

import { BreadcrumbItem, Breadcrumbs } from "@rdloom/react";

// Without a collapsed middle, a long trail wraps onto the next line instead of overflowing.
export default function BreadcrumbsLongTrailExample() {
  return (
    <div className="flex w-full justify-center">
      <div className="w-72">
        <Breadcrumbs label="You are here">
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/docs">Documentation</BreadcrumbItem>
          <BreadcrumbItem href="/docs/components">Components</BreadcrumbItem>
          <BreadcrumbItem href="/docs/components/forms">Forms</BreadcrumbItem>
          <BreadcrumbItem href="/docs/components/forms/inputs">Inputs</BreadcrumbItem>
          <BreadcrumbItem>Number field</BreadcrumbItem>
        </Breadcrumbs>
      </div>
    </div>
  );
}