Breadcrumb

TSX
"use client";

import { FileText, Folder, House } from "lucide-react";
import { Fragment } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

const folders = [
  { label: "Engineering", href: "#engineering" },
  { label: "Runbooks", href: "#runbooks" },
];

export default function Breadcrumb01() {
  return (
    <Breadcrumb className="w-full max-w-md">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#docs"
            className="inline-flex items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <House aria-hidden="true" className="size-4" />
            <span className="sr-only">Docs home</span>
          </BreadcrumbLink>
        </BreadcrumbItem>
        {folders.map((folder) => (
          <Fragment key={folder.href}>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink
                href={folder.href}
                className="inline-flex items-center gap-1.5 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
              >
                <Folder aria-hidden="true" className="size-4" />
                {folder.label}
              </BreadcrumbLink>
            </BreadcrumbItem>
          </Fragment>
        ))}
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage className="inline-flex items-center gap-1.5 font-medium">
            <FileText aria-hidden="true" className="size-4" />
            Database failover
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

TSX
"use client";

import { Fragment } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

const trail = [
  { label: "Billing", href: "#billing" },
  { label: "Invoices", href: "#invoices" },
];

const sizes = [
  {
    id: "compact",
    label: "Compact",
    list: "gap-1 text-xs",
    separator: "text-muted-foreground/60",
  },
  {
    id: "default",
    label: "Default",
    list: "gap-1.5 text-sm",
    separator: "text-muted-foreground/60",
  },
  {
    id: "large",
    label: "Large",
    list: "gap-2.5 text-base",
    separator: "text-muted-foreground/60 text-lg",
  },
];

export default function Breadcrumb02() {
  return (
    <div className="flex w-full max-w-md flex-col divide-y divide-border">
      {sizes.map((size) => (
        <div
          key={size.id}
          className="flex flex-col gap-2 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-baseline sm:gap-6"
        >
          <span className="w-16 shrink-0 text-xs font-medium text-muted-foreground">
            {size.label}
          </span>
          <Breadcrumb
            aria-label={`Breadcrumb, ${size.label.toLowerCase()} size`}
          >
            <BreadcrumbList className={size.list}>
              {trail.map((crumb) => (
                <Fragment key={crumb.href}>
                  <BreadcrumbItem>
                    <BreadcrumbLink
                      href={crumb.href}
                      className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      {crumb.label}
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                  <BreadcrumbSeparator className={size.separator}>
                    /
                  </BreadcrumbSeparator>
                </Fragment>
              ))}
              <BreadcrumbItem>
                <BreadcrumbPage className="font-medium tabular-nums">
                  INV-2048
                </BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
      ))}
    </div>
  );
}

TSX
"use client";

import { ChevronRight } from "lucide-react";
import { Fragment } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";

const trail = [
  { label: "Store", href: "#store" },
  { label: "Audio", href: "#audio" },
  { label: "Headphones", href: "#headphones" },
];

export default function Breadcrumb03() {
  return (
    <Breadcrumb className="w-full max-w-md">
      <BreadcrumbList className="gap-1">
        {trail.map((crumb) => (
          <Fragment key={crumb.href}>
            <BreadcrumbItem>
              <BreadcrumbLink
                href={crumb.href}
                className="rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring"
              >
                {crumb.label}
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator className="text-muted-foreground/50 [&>svg]:size-3">
              <ChevronRight className="cn-rtl-flip" />
            </BreadcrumbSeparator>
          </Fragment>
        ))}
        <BreadcrumbItem>
          <BreadcrumbPage className="rounded-full bg-primary px-3 py-1 text-xs font-medium text-primary-foreground">
            Studio Wireless Pro
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

TSX
"use client";

import { ArrowLeft } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";

export default function Breadcrumb04() {
  return (
    <div className="flex w-full max-w-lg items-center gap-2 rounded-lg border border-border bg-card p-1.5 pr-3 text-card-foreground shadow-xs">
      <Button
        variant="ghost"
        size="icon-sm"
        aria-label="Back to Campaigns"
        nativeButton={false}
        render={<a href="#campaigns" />}
        className="shrink-0"
      >
        <ArrowLeft aria-hidden="true" className="cn-rtl-flip" />
      </Button>
      <Separator orientation="vertical" className="my-1" />
      <Breadcrumb className="min-w-0 flex-1 pl-1">
        <BreadcrumbList className="flex-nowrap">
          <BreadcrumbItem className="hidden sm:inline-flex">
            <BreadcrumbLink
              href="#marketing"
              className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              Marketing
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator className="hidden shrink-0 sm:block" />
          <BreadcrumbItem className="shrink-0 whitespace-nowrap">
            <BreadcrumbLink
              href="#campaigns"
              className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              Campaigns
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator className="shrink-0" />
          <BreadcrumbItem className="min-w-0">
            <BreadcrumbPage className="truncate font-medium">
              Autumn launch newsletter
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Badge variant="secondary" className="shrink-0">
        Draft
      </Badge>
    </div>
  );
}

TSX
"use client";

import { Folder } from "lucide-react";

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const hidden = [
  { label: "Design", href: "#design" },
  { label: "Brand refresh 2026", href: "#brand-refresh" },
  { label: "Exports", href: "#exports" },
];

const linkClassName =
  "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";

export default function Breadcrumb05() {
  return (
    <Breadcrumb className="w-full max-w-md">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#acme-files" className={linkClassName}>
            Acme Files
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger
              aria-label={`Show ${hidden.length} hidden folders`}
              className="flex items-center rounded-md outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-popup-open:bg-muted data-popup-open:text-foreground"
            >
              <BreadcrumbEllipsis className="size-6" />
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-52">
              {hidden.map((folder, index) => (
                <DropdownMenuItem
                  key={folder.href}
                  render={<a href={folder.href} />}
                  style={{ paddingInlineStart: `${0.375 + index * 0.75}rem` }}
                >
                  <Folder
                    aria-hidden="true"
                    className="text-muted-foreground"
                  />
                  <span className="truncate">{folder.label}</span>
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#social"
            className={linkClassName}
          >
            Social
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage className="font-medium">
            launch-banner-1200x630.png
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

TSX
"use client";

import { Fragment } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const trail = [
  { label: "Northwind Handbook", href: "#handbook" },
  {
    label: "Engineering practices and standards",
    href: "#engineering-practices",
  },
  {
    label: "Incident response and on-call rotations",
    href: "#incident-response",
  },
];

const page = "Postmortem template for customer-facing outages";

export default function Breadcrumb06() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Breadcrumb>
        <BreadcrumbList className="flex-nowrap">
          {trail.map((crumb, index) => (
            <Fragment key={crumb.href}>
              <BreadcrumbItem
                className={
                  index < trail.length - 1
                    ? "hidden min-w-0 sm:inline-flex"
                    : "min-w-0"
                }
              >
                <Tooltip>
                  <TooltipTrigger
                    render={
                      <BreadcrumbLink
                        href={crumb.href}
                        className="block max-w-20 truncate rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring sm:max-w-32"
                      />
                    }
                  >
                    {crumb.label}
                  </TooltipTrigger>
                  <TooltipContent side="bottom">{crumb.label}</TooltipContent>
                </Tooltip>
              </BreadcrumbItem>
              <BreadcrumbSeparator
                className={
                  index < trail.length - 1 ? "hidden shrink-0 sm:block" : "shrink-0"
                }
              />
            </Fragment>
          ))}
          <BreadcrumbItem className="min-w-0">
            <BreadcrumbPage className="truncate font-medium">
              {page}
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <div className="flex flex-col gap-1 border-t border-border pt-3">
        <h2 className="text-lg font-semibold tracking-tight text-balance">
          {page}
        </h2>
        <p className="text-sm text-muted-foreground">
          Owned by Site Reliability · Last reviewed September 4
        </p>
      </div>
    </div>
  );
}

TSX
"use client";

import { CircleAlert, RotateCw } from "lucide-react";
import { useId, useState } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

type Status = "loading" | "ready" | "error";

const states: { value: Status; label: string }[] = [
  { value: "loading", label: "Loading" },
  { value: "ready", label: "Ready" },
  { value: "error", label: "Error" },
];

const skeletonWidths = ["w-12 sm:w-14", "w-16 sm:w-20", "w-20 sm:w-28"];

const linkClassName =
  "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";

export default function Breadcrumb07() {
  const [status, setStatus] = useState<Status>("loading");
  const labelId = useId();

  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <span
          id={labelId}
          className="text-xs font-medium text-muted-foreground"
        >
          Preview state
        </span>
        <ToggleGroup
          aria-labelledby={labelId}
          variant="outline"
          size="sm"
          spacing={0}
          value={[status]}
          onValueChange={(next) => {
            if (next.length > 0) setStatus(next[0] as Status);
          }}
        >
          {states.map((state) => (
            <ToggleGroupItem key={state.value} value={state.value}>
              {state.label}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>

      <div className="flex min-h-9 items-center rounded-lg border border-dashed border-border px-3 py-2">
        <Breadcrumb aria-busy={status === "loading"}>
          {status === "loading" ? (
            <BreadcrumbList>
              {skeletonWidths.map((width, index) => (
                <BreadcrumbItem key={width} className="gap-1.5">
                  {index > 0 ? (
                    <span
                      aria-hidden="true"
                      className="text-muted-foreground/40"
                    >
                      /
                    </span>
                  ) : null}
                  <Skeleton className={`h-4 ${width}`} />
                </BreadcrumbItem>
              ))}
              <li className="sr-only">Loading account location</li>
            </BreadcrumbList>
          ) : (
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink href="#accounts" className={linkClassName}>
                  Accounts
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator>/</BreadcrumbSeparator>
              <BreadcrumbItem>
                <BreadcrumbLink
                  href="#enterprise"
                  className={linkClassName}
                >
                  Enterprise
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator>/</BreadcrumbSeparator>
              <BreadcrumbItem>
                {status === "ready" ? (
                  <BreadcrumbPage className="font-medium">
                    Globex Corporation
                  </BreadcrumbPage>
                ) : (
                  <span className="inline-flex flex-wrap items-center gap-2">
                    <BreadcrumbPage className="inline-flex items-center gap-1.5 text-destructive">
                      <CircleAlert aria-hidden="true" className="size-3.5" />
                      Account name unavailable
                    </BreadcrumbPage>
                    <Button
                      variant="outline"
                      size="xs"
                      onClick={() => setStatus("ready")}
                    >
                      <RotateCw aria-hidden="true" />
                      Retry
                    </Button>
                  </span>
                )}
              </BreadcrumbItem>
            </BreadcrumbList>
          )}
        </Breadcrumb>
      </div>
    </div>
  );
}

TSX
"use client";

import { ChevronRight, CornerLeftUp, Folder, FolderOpen } from "lucide-react";
import { Fragment, useState } from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";

type Node = {
  id: string;
  name: string;
  children?: Node[];
};

const workspace: Node = {
  id: "workspace",
  name: "Workspace",
  children: [
    {
      id: "product",
      name: "Product",
      children: [
        {
          id: "roadmap",
          name: "Roadmap",
          children: [
            { id: "q4-planning", name: "Q4 planning" },
            { id: "mobile-offline", name: "Mobile offline mode" },
          ],
        },
        { id: "release-notes", name: "Release notes" },
      ],
    },
    {
      id: "research",
      name: "Research",
      children: [
        { id: "interviews", name: "Customer interviews" },
        { id: "surveys", name: "Pricing survey" },
      ],
    },
    { id: "operations", name: "Operations" },
  ],
};

const crumbClassName =
  "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";

export default function Breadcrumb08() {
  const [path, setPath] = useState<Node[]>([workspace]);
  const current = path[path.length - 1];
  const parent = path.length > 1 ? path[path.length - 2] : null;
  const children = current.children ?? [];

  return (
    <div className="w-full max-w-md overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-xs">
      <div className="flex items-center gap-2 border-b border-border px-3 py-2.5">
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={parent ? `Up to ${parent.name}` : "Already at top level"}
          disabled={!parent}
          onClick={() => setPath((prev) => prev.slice(0, -1))}
        >
          <CornerLeftUp aria-hidden="true" />
        </Button>
        <Breadcrumb aria-label="Folder path" className="min-w-0 flex-1">
          <BreadcrumbList>
            {path.map((node, index) => {
              const isLast = index === path.length - 1;
              return (
                <Fragment key={node.id}>
                  {index > 0 ? <BreadcrumbSeparator /> : null}
                  <BreadcrumbItem className="motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-left-2 motion-safe:duration-200 motion-safe:ease-out">
                    {isLast ? (
                      <BreadcrumbPage className="font-medium">
                        {node.name}
                      </BreadcrumbPage>
                    ) : (
                      <BreadcrumbLink
                        render={<button type="button" />}
                        className={crumbClassName}
                        onClick={() =>
                          setPath((prev) => prev.slice(0, index + 1))
                        }
                      >
                        {node.name}
                      </BreadcrumbLink>
                    )}
                  </BreadcrumbItem>
                </Fragment>
              );
            })}
          </BreadcrumbList>
        </Breadcrumb>
      </div>

      <p aria-live="polite" className="sr-only">
        {`Opened ${current.name}, ${children.length} ${children.length === 1 ? "folder" : "folders"}`}
      </p>

      {children.length > 0 ? (
        <ul className="flex flex-col p-1.5">
          {children.map((child) => (
            <li key={child.id}>
              <button
                type="button"
                onClick={() => setPath((prev) => [...prev, child])}
                className="group flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
              >
                <Folder
                  aria-hidden="true"
                  className="size-4 shrink-0 text-muted-foreground"
                />
                <span className="min-w-0 flex-1 truncate">{child.name}</span>
                <span className="text-xs text-muted-foreground tabular-nums">
                  {child.children?.length ?? 0}
                </span>
                <ChevronRight
                  aria-hidden="true"
                  className="cn-rtl-flip size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5"
                />
              </button>
            </li>
          ))}
        </ul>
      ) : (
        <div className="flex flex-col items-center gap-2 px-6 py-8 text-center">
          <FolderOpen
            aria-hidden="true"
            className="size-5 text-muted-foreground"
          />
          <p className="text-sm font-medium">
            {current.name} has no subfolders
          </p>
          <p className="text-xs text-muted-foreground">
            Use the path above to jump back to any parent folder.
          </p>
        </div>
      )}
    </div>
  );
}

TSX
"use client";

import { ArrowLeft, Check, CircleCheck, Lock } from "lucide-react";
import * as React from "react";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const steps = [
  {
    label: "Cart",
    title: "Review your cart",
    fields: [{ id: "promo", label: "Promo code", placeholder: "SPRING15" }],
  },
  {
    label: "Shipping",
    title: "Where should we ship?",
    fields: [
      {
        id: "address",
        label: "Street address",
        placeholder: "221 Harbor Lane",
      },
      { id: "postal", label: "Postal code", placeholder: "94107" },
    ],
  },
  {
    label: "Payment",
    title: "How would you like to pay?",
    fields: [
      { id: "card", label: "Card number", placeholder: "4242 4242 4242 4242" },
    ],
  },
  {
    label: "Review",
    title: "Confirm and place order",
    fields: [],
  },
];

export default function Breadcrumb09() {
  const [current, setCurrent] = React.useState(1);
  const [values, setValues] = React.useState<Record<string, string>>({});
  const [placed, setPlaced] = React.useState(false);
  const step = steps[current];
  const isLast = current === steps.length - 1;

  const startOver = () => {
    setValues({});
    setPlaced(false);
    setCurrent(0);
  };

  return (
    <div className="w-full max-w-md rounded-xl border bg-card p-4 text-card-foreground sm:p-5">
      <Breadcrumb aria-label="Checkout steps">
        <BreadcrumbList>
          {steps.map((s, i) => (
            <React.Fragment key={s.label}>
              {i > 0 ? <BreadcrumbSeparator /> : null}
              <BreadcrumbItem>
                {i < current && !placed ? (
                  <BreadcrumbLink
                    render={<button type="button" />}
                    onClick={() => setCurrent(i)}
                    className="inline-flex items-center gap-1 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                  >
                    <Check className="size-3.5" aria-hidden="true" />
                    {s.label}
                    <span className="sr-only">(completed)</span>
                  </BreadcrumbLink>
                ) : i <= current ? (
                  <BreadcrumbPage
                    aria-current={i === current ? "page" : false}
                    className={
                      i === current
                        ? "font-medium"
                        : "inline-flex items-center gap-1"
                    }
                  >
                    {i < current ? (
                      <Check className="size-3.5" aria-hidden="true" />
                    ) : null}
                    {s.label}
                  </BreadcrumbPage>
                ) : (
                  <span className="inline-flex items-center gap-1 text-muted-foreground/60">
                    <Lock className="size-3" aria-hidden="true" />
                    {s.label}
                    <span className="sr-only">(locked)</span>
                  </span>
                )}
              </BreadcrumbItem>
            </React.Fragment>
          ))}
        </BreadcrumbList>
      </Breadcrumb>

      {placed ? (
        <div className="mt-4 flex flex-col items-start gap-3" role="status">
          <div className="flex items-center gap-2">
            <CircleCheck className="size-5 text-success" aria-hidden="true" />
            <h2 className="text-base font-semibold">Order placed</h2>
          </div>
          <p className="text-sm text-muted-foreground">
            We emailed a receipt for $182.50
            {values.address ? ` and will ship to ${values.address}` : ""}.
          </p>
          <Button variant="outline" onClick={startOver}>
            Start a new order
          </Button>
        </div>
      ) : (
        <>
          <h2 className="mt-4 text-base font-semibold">{step.title}</h2>

          <form
            className="mt-4 grid gap-3"
            onSubmit={(event) => {
              event.preventDefault();
              if (isLast) setPlaced(true);
              else setCurrent((c) => c + 1);
            }}
          >
            {step.fields.map((field) => (
              <div key={field.id} className="grid gap-1.5">
                <Label htmlFor={`checkout-${field.id}`}>{field.label}</Label>
                <Input
                  id={`checkout-${field.id}`}
                  placeholder={field.placeholder}
                  value={values[field.id] ?? ""}
                  onChange={(event) => {
                    const next = event.currentTarget.value;
                    setValues((prev) => ({ ...prev, [field.id]: next }));
                  }}
                />
              </div>
            ))}

            {isLast ? (
              <dl className="grid gap-1.5 rounded-lg bg-muted p-3 text-sm">
                <div className="flex justify-between gap-3">
                  <dt className="text-muted-foreground">Merino crew sweater × 2</dt>
                  <dd className="tabular-nums">$176.00</dd>
                </div>
                <div className="flex justify-between gap-3">
                  <dt className="text-muted-foreground">Standard shipping</dt>
                  <dd className="tabular-nums">$6.50</dd>
                </div>
                <div className="flex justify-between gap-3 border-t pt-1.5 font-medium">
                  <dt>Total</dt>
                  <dd className="tabular-nums">$182.50</dd>
                </div>
              </dl>
            ) : null}

            <div className="mt-2 flex items-center justify-between gap-2">
              <Button
                type="button"
                variant="ghost"
                disabled={current === 0}
                onClick={() => setCurrent((c) => c - 1)}
              >
                <ArrowLeft aria-hidden="true" />
                Back
              </Button>
              <Button type="submit">
                {isLast ? (
                  <>
                    <Lock aria-hidden="true" />
                    Place order
                  </>
                ) : (
                  <>
                    <span className="sm:hidden">Continue</span>
                    <span className="max-sm:hidden">
                      Continue to {steps[current + 1].label.toLowerCase()}
                    </span>
                  </>
                )}
              </Button>
            </div>
          </form>
        </>
      )}
    </div>
  );
}

TSX
"use client";

import { ThumbsDown, ThumbsUp } from "lucide-react";
import * as React from "react";

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const trail = [
  { label: "Help Center", href: "#help-center" },
  { label: "Billing & plans", href: "#billing-and-plans" },
  { label: "Invoices", href: "#invoices" },
];

export default function Breadcrumb10() {
  const [vote, setVote] = React.useState<"yes" | "no" | null>(null);
  const [first, ...middle] = trail;

  return (
    <article className="@container w-full max-w-xl">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink
              href={first.href}
              className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {first.label}
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />

          {/* Narrow containers fold the middle levels into a menu. */}
          <BreadcrumbItem className="@md:hidden">
            <DropdownMenu>
              <DropdownMenuTrigger
                aria-label="Show parent sections"
                className="rounded-sm outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
              >
                <BreadcrumbEllipsis />
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-44">
                {middle.map((item) => (
                  <DropdownMenuItem
                    key={item.label}
                    render={<a href={item.href} />}
                  >
                    {item.label}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </BreadcrumbItem>
          <BreadcrumbSeparator className="@md:hidden" />

          {middle.map((item) => (
            <React.Fragment key={item.label}>
              <BreadcrumbItem className="hidden @md:inline-flex">
                <BreadcrumbLink
                  href={item.href}
                  className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  {item.label}
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="hidden @md:block" />
            </React.Fragment>
          ))}

          <BreadcrumbItem>
            <BreadcrumbPage>Download past invoices</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <h2 className="mt-4 text-xl font-semibold tracking-tight text-balance">
        Download past invoices
      </h2>
      <p className="mt-1 text-xs text-muted-foreground">
        Updated September 12 · 3 min read
      </p>
      <div className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
        <p>
          Workspace owners and billing admins can download any invoice from the
          last seven years. Open{" "}
          <span className="font-medium text-foreground">
            Settings → Billing
          </span>
          , scroll to Invoice history, and choose PDF or CSV next to the month
          you need.
        </p>
        <p>
          Need a company address or VAT ID on the document? Add it under Billing
          details first; invoices regenerate within a few minutes.
        </p>
      </div>

      <div className="mt-6 flex flex-wrap items-center gap-3 border-t pt-4">
        {vote ? (
          <p className="text-sm text-muted-foreground" role="status">
            {vote === "yes"
              ? "Thanks for the feedback."
              : "Thanks. We'll use this to improve the article."}
          </p>
        ) : (
          <>
            <span className="text-sm font-medium">
              Was this article helpful?
            </span>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setVote("yes")}
              >
                <ThumbsUp aria-hidden="true" />
                Yes
              </Button>
              <Button variant="outline" size="sm" onClick={() => setVote("no")}>
                <ThumbsDown aria-hidden="true" />
                No
              </Button>
            </div>
          </>
        )}
      </div>
    </article>
  );
}

TSX
"use client";

import { ChevronDown } from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

type Endpoint = {
  name: string;
  method: "GET" | "POST" | "DELETE";
  path: string;
  summary: string;
};
type Resource = { name: string; slug: string; endpoints: Endpoint[] };
type Section = { name: string; slug: string; resources: Resource[] };

const sections: Section[] = [
  {
    name: "Payments",
    slug: "payments",
    resources: [
      {
        name: "Refunds",
        slug: "refunds",
        endpoints: [
          {
            name: "Create a refund",
            method: "POST",
            path: "/v1/refunds",
            summary:
              "Refunds all or part of a captured charge to the original card.",
          },
          {
            name: "List refunds",
            method: "GET",
            path: "/v1/refunds",
            summary: "Returns refunds newest first, 25 per page.",
          },
          {
            name: "Cancel a refund",
            method: "POST",
            path: "/v1/refunds/:id/cancel",
            summary:
              "Cancels a refund that is still pending with the card network.",
          },
        ],
      },
      {
        name: "Disputes",
        slug: "disputes",
        endpoints: [
          {
            name: "Submit evidence",
            method: "POST",
            path: "/v1/disputes/:id/evidence",
            summary:
              "Attaches receipts and shipping proof before the deadline.",
          },
          {
            name: "Close a dispute",
            method: "POST",
            path: "/v1/disputes/:id/close",
            summary: "Accepts the chargeback and stops the dispute process.",
          },
        ],
      },
    ],
  },
  {
    name: "Customers",
    slug: "customers",
    resources: [
      {
        name: "Customers",
        slug: "customers",
        endpoints: [
          {
            name: "Retrieve a customer",
            method: "GET",
            path: "/v1/customers/:id",
            summary: "Returns a customer with their default payment method.",
          },
          {
            name: "Delete a customer",
            method: "DELETE",
            path: "/v1/customers/:id",
            summary:
              "Permanently removes a customer and cancels their subscriptions.",
          },
        ],
      },
    ],
  },
  {
    name: "Webhooks",
    slug: "webhooks",
    resources: [
      {
        name: "Endpoints",
        slug: "endpoints",
        endpoints: [
          {
            name: "Create an endpoint",
            method: "POST",
            path: "/v1/webhook_endpoints",
            summary: "Registers a URL that receives signed event payloads.",
          },
        ],
      },
    ],
  },
];

const linkClassName =
  "rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring";

function LevelMenu({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value: string;
  options: string[];
  onChange: (value: string) => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        aria-label={`Pages in ${label}`}
        className="flex size-6 items-center justify-center rounded-md outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-popup-open:bg-muted data-popup-open:text-foreground"
      >
        <ChevronDown aria-hidden="true" className="size-3.5" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-52">
        <DropdownMenuGroup>
          <DropdownMenuLabel>{label}</DropdownMenuLabel>
          <DropdownMenuRadioGroup
            value={value}
            onValueChange={(next) => onChange(next as string)}
          >
            {options.map((option) => (
              <DropdownMenuRadioItem
                key={option}
                value={option}
                closeOnClick
              >
                {option}
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default function Breadcrumb11() {
  const [sectionName, setSectionName] = React.useState("Payments");
  const [resourceName, setResourceName] = React.useState("Refunds");
  const [endpointName, setEndpointName] = React.useState("Create a refund");

  const section =
    sections.find((item) => item.name === sectionName) ?? sections[0];
  const resource =
    section.resources.find((item) => item.name === resourceName) ??
    section.resources[0];
  const endpoint =
    resource.endpoints.find((item) => item.name === endpointName) ??
    resource.endpoints[0];

  const openSection = (name: string) => {
    const next = sections.find((item) => item.name === name) ?? sections[0];
    setSectionName(next.name);
    setResourceName(next.resources[0].name);
    setEndpointName(next.resources[0].endpoints[0].name);
  };

  const openResource = (name: string) => {
    const next =
      section.resources.find((item) => item.name === name) ??
      section.resources[0];
    setResourceName(next.name);
    setEndpointName(next.endpoints[0].name);
  };

  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      <Breadcrumb aria-label="API reference path">
        <BreadcrumbList className="gap-1">
          <BreadcrumbItem className="gap-0.5">
            <BreadcrumbLink href="#api-reference" className={linkClassName}>
              API reference
            </BreadcrumbLink>
            <LevelMenu
              label="API reference"
              value={section.name}
              options={sections.map((item) => item.name)}
              onChange={openSection}
            />
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem className="gap-0.5">
            <BreadcrumbLink
              href={`#${section.slug}`}
              className={linkClassName}
            >
              {section.name}
            </BreadcrumbLink>
            <LevelMenu
              label={section.name}
              value={resource.name}
              options={section.resources.map((item) => item.name)}
              onChange={openResource}
            />
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem className="gap-0.5">
            <BreadcrumbLink
              href={`#${section.slug}-${resource.slug}`}
              className={linkClassName}
            >
              {resource.name}
            </BreadcrumbLink>
            <LevelMenu
              label={resource.name}
              value={endpoint.name}
              options={resource.endpoints.map((item) => item.name)}
              onChange={setEndpointName}
            />
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbPage className="font-medium">
              {endpoint.name}
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <div className="flex flex-col gap-2 border-t border-border pt-4">
        <h2 className="text-lg font-semibold tracking-tight text-balance">
          {endpoint.name}
        </h2>
        <div className="flex min-w-0 items-center gap-2">
          <Badge
            variant={endpoint.method === "DELETE" ? "destructive" : "secondary"}
            className="font-mono"
          >
            {endpoint.method}
          </Badge>
          <code className="truncate font-mono text-sm">{endpoint.path}</code>
        </div>
        <p className="text-sm text-muted-foreground">{endpoint.summary}</p>
      </div>
    </div>
  );
}

TSX
"use client";

import { ChevronsUpDown, GitBranch, GitCommitHorizontal } from "lucide-react";
import * as React from "react";

import { Badge } from "@/components/ui/badge";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const teams = ["Northwind Labs", "Personal"];
const projects: Record<string, string[]> = {
  "Northwind Labs": ["storefront", "admin-console", "docs-site"],
  Personal: ["portfolio", "habit-tracker"],
};
const environments = [
  { name: "Production", branch: "main", commit: "a41c9e2", age: "12 min ago" },
  {
    name: "Preview",
    branch: "feat/cart-drawer",
    commit: "7d02bb1",
    age: "3 min ago",
  },
  { name: "Development", branch: "dev", commit: "e9f3310", age: "1 h ago" },
];

const segmentTrigger =
  "inline-flex max-w-40 items-center gap-1 rounded-md px-1.5 py-1 text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 aria-expanded:bg-muted";

function Segment({
  label,
  heading,
  value,
  options,
  onChange,
}: {
  label: string;
  heading: string;
  value: string;
  options: string[];
  onChange: (value: string) => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        aria-label={`${label}: ${value}. Switch ${label.toLowerCase()}`}
        className={segmentTrigger}
      >
        <span className="truncate font-medium">{value}</span>
        <ChevronsUpDown
          className="size-3.5 shrink-0 text-muted-foreground"
          aria-hidden="true"
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-52">
        <DropdownMenuGroup>
          <DropdownMenuLabel>{heading}</DropdownMenuLabel>
          <DropdownMenuRadioGroup
            value={value}
            onValueChange={(next) => onChange(next as string)}
          >
            {options.map((option) => (
              <DropdownMenuRadioItem
                key={option}
                value={option}
                closeOnClick
              >
                {option}
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default function Breadcrumb12() {
  const [team, setTeam] = React.useState(teams[0]);
  const [project, setProject] = React.useState(projects[teams[0]][0]);
  const [envName, setEnvName] = React.useState(environments[0].name);
  const env = environments.find((e) => e.name === envName) ?? environments[0];

  return (
    <div className="w-full max-w-xl rounded-xl border bg-card text-card-foreground">
      <div className="border-b px-3 py-2">
        <Breadcrumb aria-label="Deployment context">
          <BreadcrumbList className="gap-0.5 sm:gap-1">
            <BreadcrumbItem>
              <Segment
                label="Team"
                heading="Teams"
                value={team}
                options={teams}
                onChange={(next) => {
                  setTeam(next);
                  setProject(projects[next][0]);
                }}
              />
            </BreadcrumbItem>
            <BreadcrumbSeparator className="text-muted-foreground/50">
              <span className="text-lg leading-none" aria-hidden="true">
                /
              </span>
            </BreadcrumbSeparator>
            <BreadcrumbItem>
              <Segment
                label="Project"
                heading={`Projects in ${team}`}
                value={project}
                options={projects[team]}
                onChange={setProject}
              />
            </BreadcrumbItem>
            <BreadcrumbSeparator className="text-muted-foreground/50">
              <span className="text-lg leading-none" aria-hidden="true">
                /
              </span>
            </BreadcrumbSeparator>
            <BreadcrumbItem>
              <Segment
                label="Environment"
                heading="Environments"
                value={envName}
                options={environments.map((e) => e.name)}
                onChange={setEnvName}
              />
            </BreadcrumbItem>
            <BreadcrumbSeparator className="text-muted-foreground/50">
              <span className="text-lg leading-none" aria-hidden="true">
                /
              </span>
            </BreadcrumbSeparator>
            <BreadcrumbItem>
              <BreadcrumbPage className="px-1.5">Deployments</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>

      <div className="flex flex-wrap items-center justify-between gap-3 px-4 py-4">
        <div className="min-w-0">
          <p className="truncate text-sm font-medium">
            {project}-{env.commit}.northwind.app
          </p>
          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
            <span className="flex min-w-0 items-center gap-1">
              <GitBranch className="size-3.5 shrink-0" aria-hidden="true" />
              <span className="truncate">{env.branch}</span>
            </span>
            <span className="flex items-center gap-1 font-mono">
              <GitCommitHorizontal className="size-3.5" aria-hidden="true" />
              {env.commit}
            </span>
            <span>{env.age}</span>
          </div>
        </div>
        <Badge variant="outline" className="gap-1.5">
          <span
            className="size-1.5 rounded-full bg-success"
            aria-hidden="true"
          />
          Ready
        </Badge>
      </div>
    </div>
  );
}