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/base-mira/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/base-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-mira/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      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\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-2 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            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\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 render={<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      </NavigationMenuLink>\n    </li>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}