{"id":23456383,"url":"https://github.com/walter0b/next-navlink","last_synced_at":"2025-06-20T03:05:47.831Z","repository":{"id":249787404,"uuid":"832563705","full_name":"Walter0b/Next-NavLink","owner":"Walter0b","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-30T11:52:35.000Z","size":179,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-20T03:05:21.810Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Walter0b.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-23T09:21:48.000Z","updated_at":"2025-02-26T17:55:31.000Z","dependencies_parsed_at":"2024-07-23T11:09:22.265Z","dependency_job_id":"fed8f57b-96bc-4ced-b17e-c8f1938e3028","html_url":"https://github.com/Walter0b/Next-NavLink","commit_stats":null,"previous_names":["walter0b/nextjs-navlink"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Walter0b/Next-NavLink","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walter0b%2FNext-NavLink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walter0b%2FNext-NavLink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walter0b%2FNext-NavLink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walter0b%2FNext-NavLink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Walter0b","download_url":"https://codeload.github.com/Walter0b/Next-NavLink/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Walter0b%2FNext-NavLink/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260868885,"owners_count":23074960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-24T04:28:37.208Z","updated_at":"2025-06-20T03:05:42.818Z","avatar_url":"https://github.com/Walter0b.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next-NavLink\n\n`Next-NavLink` is a customizable navigation link component for Next.js applications. I know what you're thinking: \"Another NavLink component?\" But hear me out... this one’s different. It lets you easily create navigation links with active states, conditional classes, and yes even support for different matching modes to determine the active state, among other features.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n- [Examples](#examples)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\n```bash\nnpm install next-navlink\n```\n\nOr, if you’re more of a yarn person:\n\n```bash\nyarn add next-navlink\n```\n\nOr, if you’re feeling adventurous:\n\n```bash\nbun install next-navlink\n```\n\n## Usage\n\nHere's a basic example of how to use the NavLink component in your Next.js project:\n\n```tsx\nimport React from \"react\";\nimport NavLink from \"next-navlink\";\n\nconst Navbar = () =\u003e {\n  return (\n    \u003cnav\u003e\n      \u003cNavLink to=\"/home\" activeClassName=\"active\" className=\"nav-link\"\u003e\n        Home\n      \u003c/NavLink\u003e\n      \u003cNavLink to=\"/about\" activeClassName=\"active\" className=\"nav-link\"\u003e\n        About\n      \u003c/NavLink\u003e\n      \u003cNavLink\n        to=\"/contact\"\n        activeClassName=\"active\"\n        className=\"nav-link\"\n        redirection={false}\n      \u003e\n        Contact\n      \u003c/NavLink\u003e\n    \u003c/nav\u003e\n  );\n};\n\nexport default Navbar;\n```\n\n## Props\n\nThe `NavLink` component accepts the following props:\n\n| Prop                | Type                                                          | Description                                                                                                                                                   | Default      |\n| ------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| `children`          | `React.ReactNode` or `(isActive: boolean) =\u003e React.ReactNode` | The content to be rendered inside the link. It can be a React node or a function that returns a React node, allowing customization based on the active state. | -            |\n| `activeClassName`   | `string`                                                      | The class name to apply when the link is active.                                                                                                              | `active`     |\n| `inActiveClassName` | `string`                                                      | The class name to apply when the link is not active.                                                                                                          | `''`         |\n| `className`         | `string`                                                      | Additional class names to apply to the link.                                                                                                                  | `''`         |\n| `to`                | `string`                                                      | The target path to navigate to when the link is clicked.                                                                                                      | -            |\n| `redirection`       | `boolean`                                                     | If `true`, the link redirects to the specified path. If `false`, it renders a `\u003cspan\u003e` instead, disabling the navigation.                                     | `true`       |\n| `id`                | `string`                                                      | The `id` attribute to apply to the link element.                                                                                                              | -            |\n| `onClick`           | `() =\u003e void`                                                  | A function to call when the link is clicked.                                                                                                                  | -            |\n| `matchMode`         | `'exact' \\| 'includes' \\| 'startsWith'`                       | Determines the matching behavior for the active state.                                                                                                        | `'includes'` |\n| `replace`           | `boolean`                                                     | If `true`, replaces the current history state instead of adding a new URL to the stack.                                                                       | `false`      |\n| `scroll`            | `boolean`                                                     | If `true`, scrolls to the top of the page after navigation.                                                                                                   | `true`       |\n| `prefetch`          | `boolean`                                                     | If `true`, prefetches the page in the background when the link is in the viewport.                                                                            | `true`       |\n| `isExternal`        | `boolean`                                                     | If `true`, the link will open in a new tab and will be treated as an external link.                                                                           | `false`      |\n| `aria`              | `{ [key: string]: string }`                                   | An object of ARIA attributes to apply to the link element.                                                                                                    | -            |\n| `testId`            | `string`                                                      | A test ID to apply to the link element for testing purposes.                                                                                                  | -            |\n| `disabled`          | `boolean`                                                     | If `true`, disables the link, preventing navigation and click events.                                                                                         | `false`      |\n| `activeStyle`       | `React.CSSProperties`                                         | An object containing inline styles to apply when the link is active.                                                                                          | -            |\n| `inactiveStyle`     | `React.CSSProperties`                                         | An object containing inline styles to apply when the link is inactive.                                                                                        | -            |\n| `customActiveUrl`   | `string`                                                      | The link will be considered active when the current pathname matches this URL.                                                                                | -            |\n\n## Examples\n\n### Using `replace`, `scroll`, and `prefetch`\n\nHere’s how you can make the most of these props with `NavLink`:\n\n```tsx\n\u003cNavLink\n  to=\"/about\"\n  activeClassName=\"active\"\n  className=\"nav-link\"\n  replace={true}\n  scroll={false}\n  prefetch={true}\n\u003e\n  About Us\n\u003c/NavLink\u003e\n```\n\n### Conditional Rendering\n\nWant to customize the link content based on whether it’s active? Here’s how:\n\n```tsx\n\u003cNavLink to=\"/profile\" className=\"nav-link\"\u003e\n  {(isActive) =\u003e (\n    \u003cspan\u003e{isActive ? \"Your Profile (Active)\" : \"Your Profile\"}\u003c/span\u003e\n  )}\n\u003c/NavLink\u003e\n```\n\nYou even might want a link to be considered active based on a different URL than the one it actually points to.\n\n```tsx\nCopy code\n\u003cNavLink\n  to=\"/profile/edit\"\n  customActiveUrl=\"/profile\"\n  activeClassName=\"active\"\n  className=\"nav-link\"\n\u003e\n  Edit Profile\n\u003c/NavLink\u003e\n```\n\n### Styling Links\n\nYou can style active and inactive links easily:\n\n```tsx\n\u003cNavLink\n  to=\"/dashboard\"\n  activeClassName=\"text-bold text-primary\"\n  inActiveClassName=\"text-muted\"\n  className=\"nav-link\"\n\u003e\n  Dashboard\n\u003c/NavLink\u003e\n```\n\n### Disabling Redirection\n\nNeed a link that doesn’t actually navigate for some reasons? No problem:\n\n```tsx\n\u003cNavLink to=\"/settings\" redirection={false} className=\"nav-link\"\u003e\n  Settings\n\u003c/NavLink\u003e\n```\n\n### Using `matchMode`\n\n#### Exact Match\n\nWant the link to be active only when the URL exactly matches? Use this:\n\n```tsx\n\u003cNavLink\n  to=\"/log\"\n  matchMode=\"exact\"\n  activeClassName=\"active\"\n  className=\"nav-link\"\n\u003e\n  Log\n\u003c/NavLink\u003e\n```\n\n#### Starts With Match\n\nMake the link active for any path that starts with the specified path:\n\n```tsx\n\u003cNavLink\n  to=\"/blog\"\n  matchMode=\"startsWith\"\n  activeClassName=\"active\"\n  className=\"nav-link\"\n\u003e\n  Blog\n\u003c/NavLink\u003e\n```\n\n#### Includes Match (Default)\n\nBy default, `NavLink` matches if the path is included as a substring:\n\n```tsx\n\u003cNavLink to=\"/profile\" activeClassName=\"active\" className=\"nav-link\"\u003e\n  Profile\n\u003c/NavLink\u003e\n```\n\n## Contributing\n\nContributions are welcome! If you have suggestions, bug reports, or feature requests, feel free to open an issue or submit a pull request.\n\n## License\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalter0b%2Fnext-navlink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwalter0b%2Fnext-navlink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalter0b%2Fnext-navlink/lists"}