{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:ui",
  "title": "Navigation menu",
  "description": "A site's sections across the top with panels of links: the plate rises on the surface spring, slides and resizes between keys on the settle spring, and its content moves the way you went.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/navigation-menu/navigation-menu.tsx",
      "type": "registry:ui",
      "target": "components/metalui/navigation-menu/navigation-menu.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { NavigationMenu as BaseNav } from '@base-ui/react/navigation-menu';\n\n/* ─────────────────────────────────────────────────────────\n * NAVIGATION MENU, a site's sections across the top, with panels of links\n *\n *   keys      the menubar's quiet keys; a key with a panel carries a chevron that turns over on the\n *             part spring while its panel is open; a plain link is a key too\n *   open      the panel, the menu's frosted plate, rises one nest into place on the surface spring\n *   across    moving to the next key: the plate slides under it and takes the new panel's size on\n *             the settle spring, while the content moves two grid steps the way you went and\n *             crossfades\n *   links     rows with a title and a line of description that lift on hover (the list row's look)\n *   close     Esc, moving away, or a choice: the plate fades on the release spring\n * Reduce Motion: size and place snap; content crossfades without travel.\n * Slots: NavigationMenu.Root, NavigationMenu.Item, NavigationMenu.Link.\n * ───────────────────────────────────────────────────────── */\n\nconst ROOT = 'mu-navigation-menu relative';\nconst LIST = 'm-0 p-menubar-pad list-none flex items-center gap-menubar-gap';\nconst KEY = 'mu-navigation-key inline-flex items-center gap-menubar-gap h-menubar-key-height px-menubar-key-pad-x rounded-menubar-key-radius border-0 bg-transparent type-ui text-ink no-underline cursor-default outline-none select-none hover:recipe-row-list-hover data-popup-open:recipe-row-list-hover focus-visible:focus-ring';\nconst CHEVRON = 'size-navigation-menu-chevron-size text-ink2 navigation-menu-chevron reduced-motion:transition-none';\nconst POSITIONER = 'mu-navigation-positioner z-menu-z navigation-menu-positioner';\n// The menu plate's look (frost, radius) without its fade: this plate moves and resizes its own way.\nconst POPUP = 'mu-navigation-popup relative overflow-hidden rounded-menu-radius outline-none recipe-menu backdrop-menu-blur reduce-transparency:opaque-frost navigation-menu-popup';\nconst VIEWPORT = 'mu-navigation-viewport relative h-full w-full overflow-hidden';\nconst CONTENT = 'mu-navigation-content w-max p-navigation-menu-plate-pad navigation-menu-content data-ending-style:absolute data-ending-style:inset-0';\nconst PANEL_LINK = 'mu-navigation-link grid gap-navigation-menu-link-gap px-navigation-menu-link-pad-x py-navigation-menu-link-pad-y rounded-navigation-menu-link-radius no-underline outline-none transition-row hover:recipe-row-list-hover focus-visible:recipe-row-list-hover data-active:recipe-row-list-hover';\n\nfunction offset() {\n  if (typeof window === 'undefined') return 8;\n  return parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--mu-r-navigation-menu-plate-offset')) || 8;\n}\n\nexport interface NavigationMenuProps extends Omit<BaseNav.Root.Props, 'className'> {\n  'aria-label'?: string;\n  className?: string;\n}\n\nfunction Root({ className, children, ...props }: NavigationMenuProps) {\n  return (\n    <BaseNav.Root className={className ? `${ROOT} ${className}` : ROOT} {...props}>\n      <BaseNav.List className={LIST}>{children}</BaseNav.List>\n      <BaseNav.Portal>\n        <BaseNav.Positioner className={POSITIONER} sideOffset={offset()} collisionPadding={8}>\n          <BaseNav.Popup className={POPUP}>\n            <BaseNav.Viewport className={VIEWPORT} />\n          </BaseNav.Popup>\n        </BaseNav.Positioner>\n      </BaseNav.Portal>\n    </BaseNav.Root>\n  );\n}\n\nexport interface NavigationMenuItemProps {\n  /** The key's word: \"Components\". */\n  label: string;\n  /** The panel: NavigationMenu.Link rows, in a grid if you like. */\n  children: React.ReactNode;\n}\n\n/** A key that opens a panel of links. */\nfunction Item({ label, children }: NavigationMenuItemProps) {\n  return (\n    <BaseNav.Item>\n      <BaseNav.Trigger className={KEY}>\n        {label}\n        <svg aria-hidden viewBox=\"0 0 10 10\" className={CHEVRON} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.4} strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M2.5 3.75 5 6.25l2.5-2.5\" /></svg>\n      </BaseNav.Trigger>\n      <BaseNav.Content className={CONTENT}>{children}</BaseNav.Content>\n    </BaseNav.Item>\n  );\n}\n\nexport interface NavigationMenuLinkProps extends Omit<BaseNav.Link.Props, 'className' | 'children'> {\n  children: React.ReactNode;\n  /** A line under the title, in a panel. */\n  description?: React.ReactNode;\n  /** A top-level key that goes somewhere (no panel). */\n  top?: boolean;\n  className?: string;\n}\n\n/** A link: a row in a panel (with an optional description), or a top-level key with `top`. */\nfunction Link({ children, description, top, className, ...props }: NavigationMenuLinkProps) {\n  if (top) {\n    return (\n      <BaseNav.Item>\n        <BaseNav.Link className={className ? `${KEY} ${className}` : KEY} {...props}>{children}</BaseNav.Link>\n      </BaseNav.Item>\n    );\n  }\n  return (\n    <BaseNav.Link className={className ? `${PANEL_LINK} ${className}` : PANEL_LINK} {...props}>\n      <span className=\"type-ui text-ink\">{children}</span>\n      {description && <span className=\"type-body text-ink2\">{description}</span>}\n    </BaseNav.Link>\n  );\n}\n\nexport const NavigationMenu = Object.assign(Root, { Item, Link, Root });\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/navigation-menu.md. SwiftUI: MetalNavigationMenu in the MetalUI Swift package."
}