{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:component",
  "title": "Navigation menu",
  "description": "Moves between primary destinations. Horizontal links; the current page is full ink.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/navigation-menu.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {\n  items: Array<{ label: React.ReactNode; href: string; current?: boolean }>;\n  /** Landmark name; pages carry several navs. */\n  \"aria-label\"?: string;\n}\n\nconst styles = stylex.create({\n  nav: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: {\n      default: \"1.375rem\",\n      [mq.phone]: 0,\n    },\n    flexWrap: {\n      default: null,\n      [mq.phone]: \"wrap\",\n    },\n  },\n  link: {\n    minWidth: vlak.hit,\n    display: {\n      default: \"inline-flex\",\n      [mq.phone]: \"inline-flex\",\n    },\n    alignItems: {\n      default: \"center\",\n      [mq.phone]: \"center\",\n    },\n    minHeight: {\n      default: vlak.hit,\n      [mq.phone]: vlak.hit,\n    },\n    paddingInline: {\n      default: null,\n      [mq.phone]: \"0.75rem\",\n    },\n    fontSize: {\n      default: \"0.875rem\",\n      [mq.phone]: vlak.controlFs,\n    },\n    fontWeight: 500,\n    letterSpacing: \"-0.01em\",\n    color: {\n      default: vlak.gray,\n      \":link\": vlak.gray,\n      \":visited\": vlak.gray,\n      \":hover\": { default: null, [mq.hover]: vlak.ink },\n      '[aria-current=\"page\"]': vlak.ink,\n    },\n    textDecoration: \"none\",\n    transition: {\n      default: vlak.transition,\n      [mq.reduce]: \"none\",\n    },\n  },\n});\n\n/** Links in a row; the current page is ink. */\nexport const NavigationMenu = React.forwardRef<HTMLElement, NavigationMenuProps>(function NavigationMenu({\n  items,\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Primary\",\n  ...props\n}, ref) {\n  const nav = rs([\"rs-nav\", className], styles.nav);\n  const link = rs([\"rs-nav-link\"], styles.link);\n  return (\n    <nav\n      ref={ref}\n      aria-label={props[\"aria-labelledby\"] ? undefined : ariaLabel}\n      {...props}\n      className={nav.className}\n      style={{ ...nav.style, ...style }}\n    >\n      {items.map((item, index) => (\n        <a\n          key={index}\n          href={item.href}\n          aria-current={item.current ? \"page\" : undefined}\n          className={link.className}\n          style={link.style}\n        >\n          {item.label}\n        </a>\n      ))}\n    </nav>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/navigation-menu.tsx"
    },
    {
      "path": "vlak/styles/navigation-menu.css",
      "content": "/* ── navigation-menu: generated from packages/react/src/components/navigation-menu.tsx ── */\n.rs-nav{display:flex;align-items:center;gap:1.375rem}\n@media (max-width: 640px){.rs-nav{gap:0;flex-wrap:wrap}}\n.rs-nav-link{min-width:var(--hit);display:inline-flex;align-items:center;min-height:var(--hit);font-size:0.875rem;font-weight:500;letter-spacing:-0.01em;color:var(--text-secondary);text-decoration:none;transition:var(--transition)}\n.rs-nav-link:link{color:var(--text-secondary)}\n.rs-nav-link:visited{color:var(--text-secondary)}\n.rs-nav-link[aria-current=\"page\"]{color:var(--text)}\n@media (max-width: 640px){.rs-nav-link{display:inline-flex;align-items:center;min-height:var(--hit);padding-inline:0.75rem;font-size:var(--control-fs)}}\n@media (hover: hover) and (pointer: fine){.rs-nav-link:hover{color:var(--text)}}\n@media (prefers-reduced-motion: reduce){.rs-nav-link{transition:none}}\n",
      "type": "registry:file",
      "target": "styles/vlak/navigation-menu.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "navigation",
      "classes": [
        "rs-nav",
        "rs-nav-link"
      ],
      "snippet": "<nav class=\"rs-nav\"><a href=\"#\" aria-current=\"page\">Overview</a><a href=\"#\">Docs</a><a href=\"#\">Changelog</a></nav>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Navigation menu",
        "Nav",
        "Top navigation",
        "Navbar",
        "Header links"
      ],
      "example": "import { NavigationMenu } from \"@noorddev/vlak-react\";\n\n<NavigationMenu\n  aria-label=\"Primary\"\n  items={[\n    { label: \"Overview\", href: \"/\", current: true },\n    { label: \"Docs\", href: \"/docs\" },\n    { label: \"Changelog\", href: \"/changelog\" },\n  ]}\n/>",
      "usage": {
        "use": [
          "The main links of a site in one row.",
          "current on the item for the page you are on."
        ],
        "avoid": [
          "Nested menus; keep the row flat and use a Sidebar for depth.",
          "Actions; use Button."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves between the links"
        },
        {
          "keys": "Enter",
          "does": "Follows the link"
        }
      ],
      "a11y": [
        "Renders <nav> with aria-label (\"Primary\" by default) and plain <a> links; the current page carries aria-current=\"page\"."
      ]
    }
  }
}