{"_id":"@darksnow-ui/navigation-menu","name":"@darksnow-ui/navigation-menu","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@darksnow-ui/navigation-menu","version":"1.0.0","description":"navigation-menu component for DarkSnow UI","keywords":["react","navigation-menu","component","ui","darksnow","typescript"],"author":{"name":"Anderson Rosa"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/navigation-menu"},"homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@radix-ui/react-navigation-menu":"^1.2.1","@radix-ui/react-icons":"^1.3.2","class-variance-authority":"^0.7.1","clsx":"^2.1.1","@darksnow/ui-utils":"1.0.0"},"devDependencies":{"@types/react":"^19.1.0","@types/react-dom":"^19.1.0","react":"^19.1.0","react-dom":"^19.1.0","tsup":"^8.5.0","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","typecheck":"tsc --noEmit","lint":"eslint src --ext ts,tsx","lint:fix":"eslint src --ext ts,tsx --fix"},"_id":"@darksnow-ui/navigation-menu@1.0.0","_integrity":"sha512-anXZ6/FBzEuRq2yXWXEEN46CvCaqsheR0a9kII/fxmEZ5SK9cajlSkyauqMWlFYlDWveMLtqum9CVlzk7wIHug==","_resolved":"/tmp/23f21921917284c9469dc9ca400e52bd/darksnow-ui-navigation-menu-1.0.0.tgz","_from":"file:darksnow-ui-navigation-menu-1.0.0.tgz","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-anXZ6/FBzEuRq2yXWXEEN46CvCaqsheR0a9kII/fxmEZ5SK9cajlSkyauqMWlFYlDWveMLtqum9CVlzk7wIHug==","shasum":"4adec8681f3b08728959abf67e080286fd2f1f4f","tarball":"https://registry.npmjs.org/@darksnow-ui/navigation-menu/-/navigation-menu-1.0.0.tgz","fileCount":8,"unpackedSize":42112,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBhuarpD62Qfa4dnT7xw8ywhurJtm5HfNOB9KivFnZg4AiABeoVI00CzbENdZFrmCbwjg3QuVD9dHRRGYvXoCZHEzA=="}]},"_npmUser":{"name":"andersondrosa","email":"andersondrosa@outlook.com"},"directories":{},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/navigation-menu_1.0.0_1749338986783_0.33692567701576603"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-07T23:29:46.677Z","1.0.0":"2025-06-07T23:29:46.968Z","modified":"2025-06-07T23:29:47.265Z"},"maintainers":[{"name":"andersondrosa","email":"andersondrosa@outlook.com"}],"description":"navigation-menu component for DarkSnow UI","homepage":"https://github.com/darksnow-ui/darksnow-ui#readme","keywords":["react","navigation-menu","component","ui","darksnow","typescript"],"repository":{"type":"git","url":"git+https://github.com/darksnow-ui/darksnow-ui.git","directory":"components/ui/navigation-menu"},"author":{"name":"Anderson Rosa"},"bugs":{"url":"https://github.com/darksnow-ui/darksnow-ui/issues"},"license":"MIT","readme":"# Navigation Menu\n\nA collection of links for navigating websites, built on top of Radix UI Navigation Menu primitive.\n\n## Installation\n\n```bash\nnpm install @darksnow-ui/navigation-menu\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-dom\n```\n\n## Usage\n\n```tsx\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from \"@darksnow-ui/navigation-menu\"\n\nexport function NavigationMenuExample() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-3 p-4 md:w-[400px]\">\n              <li>\n                <NavigationMenuLink href=\"/docs\">\n                  Documentation\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n```\n\n## Examples\n\n### Basic Navigation Menu\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n          <li className=\"row-span-3\">\n            <NavigationMenuLink asChild>\n              <a\n                className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-theme-bg-soft/50 to-theme-bg-soft p-6 no-underline outline-none focus:shadow-md\"\n                href=\"/\"\n              >\n                <div className=\"mb-2 mt-4 text-lg font-medium\">\n                  DarkSnow UI\n                </div>\n                <p className=\"text-sm leading-tight text-theme-content-muted\">\n                  Beautiful components built with Radix UI and Tailwind CSS.\n                </p>\n              </a>\n            </NavigationMenuLink>\n          </li>\n          <ListItem href=\"/docs\" title=\"Introduction\">\n            Re-usable components built using Radix UI and 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-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n          <ListItem href=\"/docs/primitives/alert-dialog\" title=\"Alert Dialog\">\n            A modal dialog that interrupts the user with important content.\n          </ListItem>\n          <ListItem href=\"/docs/primitives/hover-card\" title=\"Hover Card\">\n            For sighted users to preview content available behind a link.\n          </ListItem>\n          <ListItem href=\"/docs/primitives/progress\" title=\"Progress\">\n            Displays an indicator showing the completion progress of a task.\n          </ListItem>\n        </ul>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"/docs\"\n      >\n        Documentation\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n### Simple Navigation Links\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        About\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        Services\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        Contact\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n### Navigation with Icons\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        <HomeIcon className=\"h-4 w-4 mr-2\" />\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        <SearchIcon className=\"h-4 w-4 mr-2\" />\n        Search\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink\n        className={navigationMenuTriggerStyle()}\n        href=\"#\"\n      >\n        <UserIcon className=\"h-4 w-4 mr-2\" />\n        Profile\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n### Centered Navigation\n\n```tsx\n<div className=\"flex justify-center\">\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuLink\n          className={navigationMenuTriggerStyle()}\n          href=\"#\"\n        >\n          Home\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink\n          className={navigationMenuTriggerStyle()}\n          href=\"#\"\n        >\n          About\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink\n          className={navigationMenuTriggerStyle()}\n          href=\"#\"\n        >\n          Services\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink\n          className={navigationMenuTriggerStyle()}\n          href=\"#\"\n        >\n          Contact\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</div>\n```\n\n### Custom List Item Component\n\n```tsx\nconst ListItem = forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          ref={ref}\n          className={cn(\n            \"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-theme-accent hover:text-theme-accent-content focus:bg-theme-accent focus:text-theme-accent-content\",\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"text-sm font-medium leading-none\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-theme-content-muted\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  )\n})\n```\n\n## Components\n\n### NavigationMenu\n\nThe root container component that contains all navigation menu parts.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| children  | React.ReactNode   | -       | Menu content               |\n\n### NavigationMenuList\n\nContainer for navigation menu items.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| children  | React.ReactNode   | -       | Menu items                 |\n\n### NavigationMenuItem\n\nA single navigation menu item container.\n\n### NavigationMenuTrigger\n\nThe button that toggles the dropdown content visibility.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| children  | React.ReactNode   | -       | Trigger content            |\n\n### NavigationMenuContent\n\nThe container for dropdown content that appears when trigger is activated.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| children  | React.ReactNode   | -       | Content to display         |\n\n### NavigationMenuLink\n\nA navigational link component.\n\n| Prop      | Type              | Default | Description                |\n|-----------|-------------------|---------|----------------------------|\n| className | string            | -       | Additional CSS classes     |\n| href      | string            | -       | Link destination           |\n| asChild   | boolean           | false   | Render as child element    |\n\n### navigationMenuTriggerStyle\n\nA utility function that returns the default trigger styles.\n\n```tsx\nimport { navigationMenuTriggerStyle } from \"@darksnow-ui/navigation-menu\"\n\n<NavigationMenuLink className={navigationMenuTriggerStyle()}>\n  Link\n</NavigationMenuLink>\n```\n\n## Accessibility\n\n- Full keyboard navigation support with arrow keys\n- Screen reader accessible with proper ARIA attributes\n- Focus management and focus indicators\n- Supports escape key to close dropdowns\n- Proper focus trapping within dropdown content\n- ARIA expanded states for screen readers\n\n## Styling\n\nThe Navigation Menu components use DarkSnow UI design tokens:\n\n- **Container**: Flexbox layout with proper spacing\n- **Triggers**: Hover and focus states with theme accent colors\n- **Content**: Animated dropdown with shadows and borders\n- **Links**: Proper focus states and transitions\n- **Viewport**: Smooth animations for content changes\n\n### Theme Variables Used\n\n- `bg-theme-surface` - Background color for triggers and content\n- `text-theme-content` - Primary text color\n- `hover:bg-theme-accent` - Hover background\n- `focus:bg-theme-accent` - Focus background\n- `border-theme-mark-light` - Border colors\n- `shadow-theme-md` - Drop shadows\n\n## Best Practices\n\n1. **Clear hierarchy**: Use proper nesting for dropdown content\n2. **Consistent styling**: Maintain visual consistency across navigation items\n3. **Accessible labels**: Use descriptive text for navigation links\n4. **Responsive design**: Consider mobile navigation patterns\n5. **Performance**: Avoid heavy content in dropdown menus\n6. **SEO friendly**: Use semantic HTML structure\n\n## Common Patterns\n\n### Site Header Navigation\n\n```tsx\n<header className=\"border-b\">\n  <nav className=\"container mx-auto px-4\">\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuLink href=\"/\" className={navigationMenuTriggerStyle()}>\n            Home\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] gap-3 p-4 md:grid-cols-2\">\n              <ListItem href=\"/products/web\" title=\"Web Apps\">\n                Modern web applications\n              </ListItem>\n              <ListItem href=\"/products/mobile\" title=\"Mobile Apps\">\n                iOS and Android applications\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  </nav>\n</header>\n```\n\n### Documentation Navigation\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <ul className=\"grid gap-3 p-4 md:w-[500px]\">\n          <ListItem href=\"/docs/installation\" title=\"Installation\">\n            How to install and set up the library\n          </ListItem>\n          <ListItem href=\"/docs/configuration\" title=\"Configuration\">\n            Configure your project settings\n          </ListItem>\n        </ul>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## Related Components\n\n- [Menubar](/components/ui/menubar) - Desktop application-style menus\n- [Dropdown Menu](/components/ui/dropdown-menu) - Context menus and dropdowns\n- [Button](/components/ui/button) - Interactive button components\n","readmeFilename":"README.md","_rev":"1-8c4e432eefeaa17568915420fc077482"}