Breadcrumbs

import { Breadcrumbs } from "@bosunkit/components/breadcrumbs";
import { House } from "lucide-react";
import type { ReactElement } from "react";
export const description: string =
  "Parent destinations are real links; the current page is plain text with aria-current. Icons supplement the names.";
export default function Showcase(): ReactElement {
  return (
    <Breadcrumbs
      label="Documentation hierarchy"
      expandLabel="Show ancestors"
      collapseLabel="Hide ancestors"
      items={[
        { id: "home", label: "Design", href: "/", icon: <House /> },
        { id: "components", label: "Components", href: "/docs/components" },
        { id: "navigation", label: "Navigation", href: "/docs/components/navigation" },
        { id: "current", label: "Breadcrumbs" },
      ]}
    />
  );
}

import { Breadcrumbs } from "@bosunkit/components/breadcrumbs";
import { Switch } from "@bosunkit/components/switch";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";
export const description: string =
  "A deep hierarchy keeps the root, parent and current item visible. Reveal the middle ancestors, or use the switch to control disclosure externally.";
export default function LongPath(): ReactElement {
  const [expanded, setExpanded]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false);
  return (
    <div style={{ display: "grid", gap: "var(--space-lg)" }}>
      <label style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)" }}>
        <Switch checked={expanded} onCheckedChange={setExpanded} />
        Show the complete path
      </label>
      <Breadcrumbs
        label="Report example hierarchy"
        maxItems={3}
        expanded={expanded}
        onExpandedChange={setExpanded}
        expandLabel="Show all report ancestors"
        collapseLabel="Collapse report ancestors"
        items={[
          { id: "home", label: "Design", href: "/" },
          { id: "consumers", label: "Consumers", href: "/docs/consumers" },
          { id: "reports", label: "Reports and docs", href: "/docs/consumers/reports-and-docs" },
          { id: "types", label: "Report types", href: "/docs/consumers/report-types" },
          { id: "current", label: "An engineering review with a deliberately long title" },
        ]}
      />
    </div>
  );
}