Breadcrumb

import { Breadcrumb } from "~/components/ui/breadcrumb";
import { SlashIcon } from "lucide-react"; 

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Separator>
    <Icons.Slash className="size-4" />
  </Breadcrumb.Separator>
  {/* ... */}
</Breadcrumb.Root>;

import { Button } from "react-aria-components"; 
import { Breadcrumb } from "~/components/ui/breadcrumb"; 
import { Menu } from "~/components/ui/menu"; 
import { LinkStyles } from "~/components/ui/link"; 
import { Popover } from "~/components/ui/popover"; 

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Item>
    <Menu.Root>
      <Button className={LinkStyles({ variant: "default" })}>Components</Button>

      <Popover.Content>
        <Popover.Arrow />

        <Menu.Content>
          <Menu.Item>Documentation</Menu.Item>
          <Menu.Item>Themes</Menu.Item>
          <Menu.Item>GitHub</Menu.Item>
        </Menu.Content>
      </Popover.Content>
    </Menu.Root>
  </Breadcrumb.Item>
  {/* ... */}
</Breadcrumb.Root>;

import { Breadcrumb } from "~/components/ui/breadcrumb"; 

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Item>
    <Breadcrumb.Ellipsis className="size-4" />
  </Breadcrumb.Item>
  {/* ... */}
</Breadcrumb.Root>;