navigation-menu-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu-example",
  "title": "Navigation Menu",
  "registryDependencies": [
    "button",
    "dialog",
    "navigation-menu",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-lyra/examples/navigation-menu-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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:\n      \"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 NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with 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-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\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]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\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=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}