Breadcrumb

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <details class="group relative">
        <summary
          class="hover:text-foreground focus-visible:ring-outline/50 cursor-pointer list-none rounded-sm outline-none focus-visible:ring-3 [&::-webkit-details-marker]:hidden"
          aria-label="Show hidden breadcrumb paths"
        >
          <BreadcrumbEllipsis />
        </summary>
        <ul
          class="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 min-w-40 rounded-md border p-1 shadow-md"
        >
          <li>
            <BreadcrumbLink class="hover:bg-muted block rounded-sm px-2 py-1.5" href="/docs/">
              Docs
            </BreadcrumbLink>
          </li>
          <li>
            <BreadcrumbLink
              class="hover:bg-muted block rounded-sm px-2 py-1.5"
              href="/docs/components/"
            >
              Components
            </BreadcrumbLink>
          </li>
          <li>
            <BreadcrumbLink
              class="hover:bg-muted block rounded-sm px-2 py-1.5"
              href="/docs/components/breadcrumb/"
            >
              Breadcrumb
            </BreadcrumbLink>
          </li>
        </ul>
      </details>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#usage">Usage</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Interactive Ellipsis</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>