{
"schemaVersion": 1,
"name": "navigation-menu",
"useFor": "Use for a site's top navigation with grouped destinations (Product, Docs). Put NavigationMenuLink rows with a title and a muted line inside each NavigationMenuContent. Pass viewport={false} to open each panel under its own trigger. navigationMenuTriggerStyle styles a plain link as a trigger; call it from a client component.",
"constraints": [
"Actions in a navigation menu",
"A navigation menu inside the console's rail (use Sidebar)",
"Panels taller than the screen"
],
"documentation": "",
"source": "Extrapolated from the Inkbox console (Figma 427:2715): the rail's nav rows and the raised panel",
"exports": [
"NavigationMenu",
"NavigationMenuContent",
"NavigationMenuIndicator",
"NavigationMenuItem",
"NavigationMenuLink",
"NavigationMenuList",
"NavigationMenuTrigger",
"NavigationMenuViewport",
"navigationMenuTriggerStyle"
],
"client": true,
"docsUrl": "https://inkbox-ds.vercel.app/components/navigation-menu",
"markdownUrl": "https://inkbox-ds.vercel.app/r/navigation-menu.md",
"examples": [
{
"path": "examples/navigation-menu.tsx",
"content": "\"use client\";\n\n\nimport { ChatCircleTextIcon, EnvelopeSimpleIcon, LockKeyIcon, PhoneIcon, ArrowsLeftRightIcon, WebhooksLogoIcon } from \"@phosphor-icons/react/ssr\";\n\nimport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\n\nconst CHANNELS = [\n { title: \"Email\", body: \"A mailbox for every agent, on inkboxmail.com or your domain.\", icon: EnvelopeSimpleIcon },\n { title: \"Phone\", body: \"Calls and texts on a number the agent owns.\", icon: PhoneIcon },\n { title: \"iMessage\", body: \"Shared or dedicated lines that also handle calls.\", icon: ChatCircleTextIcon },\n { title: \"Agent2Agent\", body: \"Publish an Agent Card and take tasks from other agents.\", icon: ArrowsLeftRightIcon },\n];\n\nfunction Menu({ defaultValue }: { defaultValue?: string }) {\n return (\n \n \n \n Channels\n \n \n {CHANNELS.map(({ title, body, icon: Icon }) => (\n - \n \n \n \n {title}\n \n {body}\n \n
\n ))}\n
\n \n \n \n Shared\n \n \n - \n \n \n \n Vault\n \n Zero-knowledge secrets for your agents.\n \n
\n - \n \n \n \n Webhooks\n \n Event payloads, signed and delivered.\n \n
\n
\n \n \n \n \n Docs\n \n \n \n \n );\n}\n\nexport function Preview() {\n return (\n \n
\n \n );\n}\n\nexport function Open() {\n return (\n \n
\n \n );\n}\n",
"exports": [
"Preview",
"Open"
],
"requires": [
"navigation-menu"
],
"packages": [
"@phosphor-icons/react"
],
"previews": [
{
"name": "Preview",
"url": "https://inkbox-ds.vercel.app/preview/navigation-menu/Preview"
},
{
"name": "Open",
"url": "https://inkbox-ds.vercel.app/preview/navigation-menu/Open"
}
]
}
],
"type": "ui",
"title": "Navigation Menu",
"description": "Nav-row triggers and links with panels that open in a raised white viewport.",
"surface": "site",
"kinds": [],
"requires": [
"theme",
"utils"
],
"packages": [
"radix-ui",
"@phosphor-icons/react",
"class-variance-authority"
],
"files": [
{
"path": "components/ui/navigation-menu.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\";\nimport { CaretDownIcon } from \"@phosphor-icons/react/ssr\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Site navigation with panels, extrapolated from the console's nav rows (Figma 427:2715: Agent Workspace, Manage\n// Agents): triggers and links are 38px rows with 8px corners, 12px of side padding and a 14px regular ink label, the\n// lilac under the pointer and under an open trigger; the trigger's 16px caret turns over when open (on-screen motion,\n// 200ms in-out). The panel opens below in a raised white viewport (8px corners, the floating shadow) that grows from\n// 96 percent with a fade and resizes to each panel (centered under the menu on phones, at its start from 768px); links inside are nav rows with a 14px title and a 14px muted line.\nfunction NavigationMenu({ className, children, viewport = true, ...props }: React.ComponentProps & { viewport?: boolean }) {\n return (\n \n {children}\n {viewport && }\n \n );\n}\n\nfunction NavigationMenuList({ className, ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction NavigationMenuItem({ className, ...props }: React.ComponentProps) {\n return ;\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9.5 w-max items-center justify-center gap-1.5 rounded-control px-3 font-sans text-body leading-tight text-fg outline-none transition-colors duration-150 ease-out hover:bg-subtle focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-subtle data-[state=open]:bg-subtle motion-reduce:transition-none [&_svg:not([class*='size-'])]:size-5.5\",\n);\n\nfunction NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction NavigationMenuContent({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction NavigationMenuViewport({ className, ...props }: React.ComponentProps) {\n return (\n \n \n
\n );\n}\n\nfunction NavigationMenuLink({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction NavigationMenuIndicator({ className, ...props }: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nexport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuIndicator,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n};\n"
}
]
}