{"_id":"@alakel/navbar","name":"@alakel/navbar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alakel/navbar","version":"1.0.0","private":false,"description":"A responsive, accessible, and animated React navbar for modern web interfaces.","type":"module","license":"MIT","author":{"name":"Abdullah Alakel","url":"https://alakel.dev"},"repository":{"type":"git","url":"git+https://github.com/alakeldev/alakel-ui.git","directory":"packages/web/navbar"},"homepage":"https://ui.alakel.dev/web","bugs":{"url":"https://github.com/alakeldev/alakel-ui/issues"},"keywords":["react","navbar","navigation","responsive","accessible","animation","radix-ui","motion"],"publishConfig":{"access":"public"},"main":"./dist/index.js","style":"./dist/styles.css","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"scripts":{"build":"vite build && tsc --project tsconfig.build.json","dev":"vite build --watch","test":"vitest run","typecheck":"tsc --noEmit","prepublishOnly":"npm run test && npm run typecheck && npm run build","clean":"rm -rf dist"},"dependencies":{"@radix-ui/react-dialog":"^1.1.23","@radix-ui/react-navigation-menu":"^1.2.22","motion":"^13.2.0"},"devDependencies":{"@types/react":"^19.2.18","@types/react-dom":"^19.2.4","@testing-library/react":"^16.3.3","@testing-library/user-event":"^14.6.7","jsdom":"^30.0.1","typescript":"^6.0.3","vite":"^8.2.1","vitest":"^5.0.0"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"gitHead":"2eb2667ffb9daf582531f3536904298aa2b5c159","_id":"@alakel/navbar@1.0.0","_nodeVersion":"24.19.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-qpPwdfBIcOJ3nlDfqaqZIhIpbiR4InTtZfdy3rgDA1ZD8WRVTA8cApGE+Dp800t57qgl6UB1QTUbv5EO7vDWSg==","shasum":"d2c542ec669e16535858f1d23ef1ab8f478a85e8","tarball":"https://registry.npmjs.org/@alakel/navbar/-/navbar-1.0.0.tgz","fileCount":9,"unpackedSize":55645,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCwQ/RSrc+dxEwFmJAysEADQNhon4vfQcgERH7DHhzcZAIgM+KlEgdCLK5EcaU384Hsx4HflVJK9h4ZSLqQL1TaKOc="}]},"_npmUser":{"name":"alakeldev","email":"abdullah.k.alakel@gmail.com"},"directories":{},"maintainers":[{"name":"alakeldev","email":"abdullah.k.alakel@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/navbar_1.0.0_1789209005864_0.15773389965479723"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-12T10:30:05.602Z","1.0.0":"2026-09-12T10:30:06.023Z","modified":"2026-09-12T10:30:06.281Z"},"maintainers":[{"name":"alakeldev","email":"abdullah.k.alakel@gmail.com"}],"description":"A responsive, accessible, and animated React navbar for modern web interfaces.","homepage":"https://ui.alakel.dev/web","keywords":["react","navbar","navigation","responsive","accessible","animation","radix-ui","motion"],"repository":{"type":"git","url":"git+https://github.com/alakeldev/alakel-ui.git","directory":"packages/web/navbar"},"author":{"name":"Abdullah Alakel","url":"https://alakel.dev"},"bugs":{"url":"https://github.com/alakeldev/alakel-ui/issues"},"license":"MIT","readme":"# `@alakel/navbar`\n\nA responsive, accessible, and animated React navbar for modern websites. It keeps the brand on the left and places configurable navigation on the right by default, while supporting left and centered navigation layouts.\n\nAnimations use Motion for React, the current package and documentation name for the library previously known as Framer Motion.\n\n## Installation\n\nInstall the package from npm:\n\n```bash\nnpm install @alakel/navbar\n```\n\nReact and React DOM 18.2 or newer are required. React 19 is supported.\n\n## Current features\n\n- Any number of data-driven links and dropdown groups\n- Accessible desktop dropdowns built with Radix Navigation Menu\n- Responsive mobile drawer built with Radix Dialog\n- Active-link state through `activeHref`\n- Four Motion presets: `none`, `subtle`, `smooth`, and `spring`\n- Configurable `sm`, `md`, or `lg` responsive collapse points\n- Optional action, active indicator, sticky positioning, and mobile menu\n- Default and floating visual treatments\n- CSS custom properties for visual customization\n- Reduced-motion support\n\n## Usage\n\nImport the component and its stylesheet:\n\n```tsx\nimport { Navbar, type NavbarItem } from \"@alakel/navbar\";\nimport \"@alakel/navbar/styles.css\";\n\nconst items: readonly NavbarItem[] = [\n  { type: \"link\", label: \"Home\", href: \"/\" },\n  {\n    type: \"dropdown\",\n    label: \"Products\",\n    items: [\n      {\n        type: \"link\",\n        label: \"Analytics\",\n        href: \"/analytics\",\n        description: \"Understand how people use your product.\",\n      },\n      {\n        type: \"link\",\n        label: \"Automation\",\n        href: \"/automation\",\n        description: \"Create reliable automated workflows.\",\n      },\n    ],\n  },\n  { type: \"link\", label: \"About\", href: \"/about\" },\n];\n\nexport function SiteNavbar() {\n  return (\n    <Navbar\n      activeHref=\"/\"\n      brand={{ content: \"Acme\", href: \"/\", ariaLabel: \"Acme home\" }}\n      items={items}\n      action={<a href=\"/signup\">Get started</a>}\n      collapseAt=\"md\"\n      motion=\"smooth\"\n      onNavigate={(item) => console.log(\"Navigating to\", item.href)}\n    />\n  );\n}\n```\n\nA link with `external: true` opens in a new tab and receives `rel=\"noopener noreferrer\"`. A dropdown accepts the same link objects in its `items` array.\n\nThe array controls the composition. Pass two objects for two navigation items, eight objects for eight items, only `link` objects for a navbar without dropdowns, or include any number of `dropdown` objects when dropdown navigation is needed. No separate count or dropdown toggle is required in application code.\n\n## Main props\n\n| Prop | Type | Default | Purpose |\n| --- | --- | --- | --- |\n| `brand` | `NavbarBrand` | Required | Logo or wordmark content and an optional home link |\n| `items` | `readonly NavbarItem[]` | Required | Top-level links and dropdown groups |\n| `activeHref` | `string` | — | Marks an exact matching link as the current page |\n| `alignment` | `\"left\" \\| \"center\" \\| \"right\"` | `\"right\"` | Positions desktop navigation |\n| `action` | `ReactNode` | — | Adds content after the navigation |\n| `sticky` | `boolean` | `false` | Keeps the navbar at the top while scrolling |\n| `variant` | `\"default\" \\| \"floating\"` | `\"default\"` | Selects the outer visual treatment |\n| `motion` | `\"none\" \\| \"subtle\" \\| \"smooth\" \\| \"spring\"` | `\"smooth\"` | Selects or disables Motion animation |\n| `showActiveIndicator` | `boolean` | `true` | Shows or hides the active-link marker |\n| `mobileMenu` | `boolean` | `true` | Enables or disables the responsive drawer |\n| `collapseAt` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Chooses the responsive collapse point |\n| `displayMode` | `\"responsive\" \\| \"desktop\" \\| \"mobile\"` | `\"responsive\"` | Uses breakpoints or forces a presentation mode |\n| `dropdownDelay` | `number` | `100` | Changes the hover-open delay in milliseconds |\n| `onNavigate` | `(item, event) => void` | — | Updates state or integrates a client-side router when a link is selected |\n\n## Customize the design\n\nOverride the package variables from an app stylesheet:\n\n```css\n:root {\n  --ak-navbar-accent: #7c3aed;\n  --ak-navbar-background: rgba(8, 8, 12, 0.9);\n  --ak-navbar-border: rgba(255, 255, 255, 0.12);\n  --ak-navbar-foreground: #ffffff;\n  --ak-navbar-muted: #a1a1aa;\n  --ak-navbar-panel: #15151a;\n  --ak-navbar-radius: 1rem;\n  --ak-navbar-max-width: 80rem;\n  --ak-navbar-height: 4.5rem;\n}\n```\n\n## Local development\n\nFrom the repository root, start the package watcher and documentation app together:\n\n```bash\nnpm run dev\n```\n\nThen open `http://localhost:3001/web/navbar`. The interactive controls let you switch between 2, 4, 7, or 8 items, enable or disable the dropdown and mobile menu, change alignment and collapse width, force a desktop or mobile preview, and compare every Motion preset. Use Tab, Shift+Tab, Enter, Space, Escape, and the arrow keys to verify keyboard behavior.\n\nBefore publishing a release, run:\n\n```bash\nnpm run biome:check\nnpm test\nnpm run tsc:check\nnpm run build\n```\n\nInspect the exact files npm will include without publishing:\n\n```bash\nnpm pack --dry-run --workspace=@alakel/navbar\n```\n\n## Build contract\n\nThe package uses Vite library mode and publishes ESM only:\n\n- `dist/index.js` contains the runtime JavaScript.\n- `dist/index.d.ts` and related declaration files contain the TypeScript API.\n- `dist/styles.css` contains the required package styles.\n- React and React DOM remain peer dependencies.\n- Radix and Motion imports are externalized so the build does not bundle duplicate runtimes.\n\n## License\n\nReleased under the [MIT License](./LICENSE).\n","readmeFilename":"README.md","_rev":"1-91574a7287b6c8cd068d6120a6f4ffca"}