{
  "name": "BreadcrumbResponsive",
  "type": "registry:example",
  "dependencies": [
    "@vueuse/core"
  ],
  "registryDependencies": [
    "breadcrumb",
    "button",
    "drawer",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "example/BreadcrumbResponsive.vue",
      "content": "<script lang=\"ts\" setup>\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'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\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 itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}