{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "navigation-menu", "dependencies": [ "@data-slot/navigation-menu" ], "files": [ { "path": "ui/navigation-menu/NavigationMenu.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenu.astro directly.\n/**\n * @component NavigationMenu\n * @title Navigation Menu\n * @description A menu with dropdown content and optional viewport transitions.\n *\n * @preview\n *\n * \n * \n * \n * Products\n * \n *
\n * \n *
\n *
Analytics
\n *
Real-time insights
\n *
\n * \n * \n *
\n *
Automation
\n *
Workflow builders
\n *
\n * \n * \n *
\n *
Security
\n *
Enterprise-grade
\n *
\n * \n * \n *
\n *
Integrations
\n *
Connect tools
\n *
\n * \n *
\n * \n * \n * \n * Solutions\n * \n *
\n * \n *
\n *
Startups
\n *
Move fast
\n *
\n * \n * \n *
\n *
Enterprise
\n *
Scale securely
\n *
\n * \n * \n *
\n *
Agencies
\n *
Client delivery
\n *
\n * \n * \n *
\n *
E-commerce
\n *
Sell online
\n *
\n * \n *
\n * \n * \n * \n * Resources\n * \n *
\n * \n *
\n *
Docs
\n *
Get started
\n *
\n * \n * \n *
\n *
Blog
\n *
Latest updates
\n *
\n * \n * \n *
\n *
Support
\n *
Get help
\n *
\n * \n * \n *
\n *
Events
\n *
Upcoming webinars
\n *
\n * \n * \n *
\n *
Guides
\n *
Best practices
\n *
\n * \n * \n *
\n *
Contact
\n *
Talk to us
\n *
\n * \n *
\n * \n * \n * \n * Company\n * \n *
\n * \n *
\n *
About
\n *
Our story
\n *
\n * \n * \n *
\n *
Careers
\n *
Join the team
\n *
\n * \n *
\n * \n * \n * \n * \n * \n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n * NavigationMenu,\n * NavigationMenuList,\n * NavigationMenuItem,\n * NavigationMenuTrigger,\n * NavigationMenuContent,\n * NavigationMenuLink,\n * } from '@bejamas/ui/components/navigation-menu';\n * ---\n *\n * \n * \n * \n * Products\n * \n *
\n * \n *
\n *
Analytics
\n *
Real-time insights
\n *
\n * \n * \n *
\n *
Automation
\n *
Workflow builders
\n *
\n * \n *
\n * \n * \n * \n * Resources\n * \n *
\n * \n *
\n *
Docs
\n *
Get started
\n *
\n * \n * \n *
\n *
Support
\n *
Get help
\n *
\n * \n *
\n * \n * \n * \n * \n * \n * ```\n *\n * @api\n *\n * ### NavigationMenu Props\n *\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | `align` | `\"start\" \\| \"center\" \\| \"end\"` | `\"start\"` | Viewport alignment relative to the trigger row |\n * | `viewport` | `boolean` | `true` | Enable animated viewport container for content |\n * | `delayOpen` | `number` | `0` | Delay in ms before opening menu |\n * | `delayClose` | `number` | `0` | Delay in ms before closing menu |\n * | `openOnFocus` | `boolean` | `false` | Open menu on keyboard focus |\n *\n * ### NavigationMenuItem Props\n *\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | `value` | `string` | — | Unique identifier for the item |\n * | `align` | `\"start\" \\| \"center\" \\| \"end\"` | `\"start\"` | Content alignment relative to trigger |\n *\n * ### Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `navigation-menu:change` | `{ value: string \\| null }` | Fired when active item changes |\n *\n * ### Programmatic Control\n *\n * ```js nocollapse\n * // Open a specific item\n * element.dispatchEvent(\n * new CustomEvent(\"navigation-menu:set\", { detail: { value: \"products\" } })\n * );\n *\n * // Close the menu\n * element.dispatchEvent(\n * new CustomEvent(\"navigation-menu:set\", { detail: { value: null } })\n * );\n * ```\n *\n * @examples\n *\n * ### With Icons\n *\n * Links with Lucide icons for visual enhancement.\n *\n * \n * \n * \n * Features\n * \n *
\n * \n * \n *
\n *
Analytics
\n *
Track your metrics
\n *
\n * \n * \n * \n *
\n *
Automation
\n *
Streamline workflows
\n *
\n * \n * \n * \n *
\n *
Security
\n *
Enterprise-grade protection
\n *
\n * \n *
\n * \n * \n * \n * \n * \n *\n * ### Featured Card\n *\n * Hero-style layout with a featured item alongside regular links.\n *\n * \n * \n * \n * Getting Started\n * \n *
\n *
\n * \n *
Introduction
\n *

Learn the basics and get up to speed quickly with our comprehensive guides.

\n * \n *
\n * \n *
\n *
Installation
\n *
Step-by-step setup
\n *
\n * \n * \n *
\n *
Configuration
\n *
Customize settings
\n *
\n * \n * \n *
\n *
Examples
\n *
Code samples
\n *
\n * \n *
\n * \n * \n * \n * \n * \n *\n * ### With Simple Links\n *\n * Use `navigationMenuTriggerStyle()` to style regular links to match triggers.\n *\n * \n * \n * \n * Products\n * \n *
\n * Product One\n * Product Two\n *
\n * \n * \n * \n * \n * Pricing\n * \n * \n * \n * \n * Docs\n * \n * \n * \n * \n * \n *\n * ### Without Viewport\n *\n * Set `viewport={false}` to render content directly without the animated viewport container.\n *\n * \n * \n * \n * Menu\n * \n *
\n * Option One\n * Option Two\n *
\n * \n * \n * \n * \n */\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport NavigationMenuPositioner from \"./NavigationMenuPositioner.astro\";\n\ninterface Props extends HTMLAttributes<\"nav\"> {\n class?: string;\n align?: \"start\" | \"center\" | \"end\";\n viewport?: boolean;\n delayOpen?: number;\n delayClose?: number;\n openOnFocus?: boolean;\n}\n\nconst {\n class: className = \"\",\n align = \"start\",\n viewport = true,\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n ...rest\n} = Astro.props as Props;\n---\n\n\n \n {viewport && }\n\n\n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuList.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuList.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"ul\"> {\n class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n\n \n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuItem.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuItem.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"li\"> {\n class?: string;\n value?: string;\n}\n\nconst { class: className = \"\", value, ...rest } = Astro.props as Props;\n---\n\n\n \n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuTrigger.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuTrigger.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport SemanticIcon from \"../icon/SemanticIcon.astro\";\n\ninterface Props extends HTMLAttributes<\"button\"> {\n class?: string;\n}\n\nexport const navigationMenuTriggerStyle = cva(\n \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-base font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none\",\n);\n\nconst {\n class: className = \"\",\n type = \"button\",\n ...rest\n} = Astro.props as Props;\n---\n\n\n \n \n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuContent.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuContent.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n class?: string;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n side?: \"top\" | \"bottom\";\n sideOffset?: number;\n}\n\nconst {\n class: className = \"\",\n align,\n alignOffset,\n side,\n sideOffset = 6,\n ...rest\n} = Astro.props as Props;\n---\n\n\n \n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuViewport.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuViewport.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuLink.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuLink.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"a\"> {\n class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n\n \n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuIndicator.astro", "content": "---\n// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/NavigationMenuIndicator.astro directly.\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n class?: string;\n}\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n\n
\n
\n\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/index.ts", "content": "// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/navigation-menu/index.ts directly.\nexport { default as NavigationMenu } from \"./NavigationMenu.astro\";\nexport { default as NavigationMenuList } from \"./NavigationMenuList.astro\";\nexport { default as NavigationMenuItem } from \"./NavigationMenuItem.astro\";\nexport { default as NavigationMenuTrigger } from \"./NavigationMenuTrigger.astro\";\nexport { default as NavigationMenuContent } from \"./NavigationMenuContent.astro\";\nexport { default as NavigationMenuPositioner } from \"./NavigationMenuPositioner.astro\";\nexport { default as NavigationMenuViewport } from \"./NavigationMenuViewport.astro\";\nexport { default as NavigationMenuLink } from \"./NavigationMenuLink.astro\";\nexport { default as NavigationMenuIndicator } from \"./NavigationMenuIndicator.astro\";\nexport { navigationMenuTriggerStyle } from \"./NavigationMenuTrigger.astro\";\n", "type": "registry:ui" }, { "path": "ui/navigation-menu/NavigationMenuPositioner.astro", "type": "registry:ui", "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport NavigationMenuViewport from \"./NavigationMenuViewport.astro\";\n\ninterface Props extends HTMLAttributes<\"div\"> {\n class?: string;\n align?: \"start\" | \"center\" | \"end\";\n alignOffset?: number;\n side?: \"top\" | \"bottom\";\n sideOffset?: number;\n}\n\nconst {\n class: className = \"\",\n side = \"bottom\",\n sideOffset = 8,\n align = \"start\",\n alignOffset = 0,\n ...rest\n} = Astro.props as Props;\n---\n\n
\n \n \n \n
\n \n\n" } ], "type": "registry:ui" }