shadcn-ui/apps/v4/public/r/styles/default/breadcrumb-responsive.json

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