{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:component",
  "title": "Navigation Menu",
  "author": "Toby Belhome",
  "description": "A set of layered menu items—triggered by hover or click.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "examples/components/navigation-menu/01/page.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\";\n\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle\n} from \"@/components/ui/navigation-menu\";\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\"\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description: \"For sighted users to preview content available behind a link.\"\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\"\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\"\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\"\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\"\n  }\n];\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu viewport={false}>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md\"\n                    href=\"/\">\n                    <div className=\"mt-4 mb-2 text-lg font-medium\">shadcn/ui</div>\n                    <p className=\"text-muted-foreground text-sm leading-tight\">\n                      Beautifully designed components built with Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem key={component.title} title={component.title} href={component.href}>\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/docs\">Docs</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">Learn how to use the library.</div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">Read our latest blog posts.</div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleHelpIcon />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleIcon />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleCheckIcon />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">{children}</p>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/navigation-menu.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}