Breadcrumb

import { Breadcrumb } from "@/ui/Breadcrumb";

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item><Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link></Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item><Breadcrumb.Page>Button</Breadcrumb.Page></Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

function BreadcrumbRoot({ children }: { children: React.ReactNode }) {
  return <nav aria-label="Breadcrumb">{children}</nav>;
}

type BreadcrumbCompound = typeof BreadcrumbRoot & { Root: typeof BreadcrumbRoot };
export const Breadcrumb = Object.assign(BreadcrumbRoot, { Root: BreadcrumbRoot }) as BreadcrumbCompound;