snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/new-york-v4/examples/breadcrumb-responsive.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+
+import { useMediaQuery } from "@/hooks/use-media-query"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york-v4/ui/breadcrumb"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/registry/new-york-v4/ui/dropdown-menu"
+
+const items = [
+  { href: "#", label: "Home" },
+  { href: "#", label: "Documentation" },
+  { href: "#", label: "Build Your Application" },
+  { href: "#", label: "Data Fetching" },
+  { label: "Caching and Revalidating" },
+]
+
+const ITEMS_TO_DISPLAY = 3
+
+export default function BreadcrumbResponsive() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery("(min-width: 768px)")
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href={items[0].href ?? "/"}>{items[0].label}</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        {items.length > ITEMS_TO_DISPLAY ? (
+          <>
+            <BreadcrumbItem>
+              {isDesktop ? (
+                <DropdownMenu open={open} onOpenChange={setOpen}>
+                  <DropdownMenuTrigger
+                    className="flex items-center gap-1"
+                    aria-label="Toggle menu"
+                  >
+                    <BreadcrumbEllipsis className="size-4" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start">
+                    {items.slice(1, -2).map((item, index) => (
+                      <DropdownMenuItem key={index}>
+                        <Link href={item.href ? item.href : "#"}>
+                          {item.label}
+                        </Link>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              ) : (
+                <Drawer open={open} onOpenChange={setOpen}>
+                  <DrawerTrigger aria-label="Toggle Menu">
+                    <BreadcrumbEllipsis className="h-4 w-4" />
+                  </DrawerTrigger>
+                  <DrawerContent>
+                    <DrawerHeader className="text-left">
+                      <DrawerTitle>Navigate to</DrawerTitle>
+                      <DrawerDescription>
+                        Select a page to navigate to.
+                      </DrawerDescription>
+                    </DrawerHeader>
+                    <div className="grid gap-1 px-4">
+                      {items.slice(1, -2).map((item, index) => (
+                        <Link
+                          key={index}
+                          href={item.href ? item.href : "#"}
+                          className="py-1 text-sm"
+                        >
+                          {item.label}
+                        </Link>
+                      ))}
+                    </div>
+                    <DrawerFooter className="pt-4">
+                      <DrawerClose asChild>
+                        <Button variant="outline">Close</Button>
+                      </DrawerClose>
+                    </DrawerFooter>
+                  </DrawerContent>
+                </Drawer>
+              )}
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+          </>
+        ) : null}
+        {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (
+          <BreadcrumbItem key={index}>
+            {item.href ? (
+              <>
+                <BreadcrumbLink
+                  asChild
+                  className="max-w-20 truncate md:max-w-none"
+                >
+                  <Link href={item.href}>{item.label}</Link>
+                </BreadcrumbLink>
+                <BreadcrumbSeparator />
+              </>
+            ) : (
+              <BreadcrumbPage className="max-w-20 truncate md:max-w-none">
+                {item.label}
+              </BreadcrumbPage>
+            )}
+          </BreadcrumbItem>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}