next-navlink v1.3.0

Next-NavLink

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.

Table of Contents

• Installation
• Usage
• Props
• Examples
• Contributing
• License

Installation

npm install next-navlink

Or, if you’re more of a yarn person:

yarn add next-navlink

Or, if you’re feeling adventurous:

bun install next-navlink

Usage

Here's a basic example of how to use the NavLink component in your Next.js project:

import React from "react";
import NavLink from "next-navlink";

const Navbar = () => {
  return (
    <nav>
      <NavLink to="/home" activeClassName="active" className="nav-link">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active" className="nav-link">
        About
      </NavLink>
      <NavLink
        to="/contact"
        activeClassName="active"
        className="nav-link"
        redirection={false}
      >
        Contact
      </NavLink>
    </nav>
  );
};

export default Navbar;

Props

The NavLink component accepts the following props:

Examples

Using replace, scroll, and prefetch

Here’s how you can make the most of these props with NavLink:

<NavLink
  to="/about"
  activeClassName="active"
  className="nav-link"
  replace={true}
  scroll={false}
  prefetch={true}
>
  About Us
</NavLink>

Conditional Rendering

Want to customize the link content based on whether it’s active? Here’s how:

<NavLink to="/profile" className="nav-link">
  {(isActive) => (
    <span>{isActive ? "Your Profile (Active)" : "Your Profile"}</span>
  )}
</NavLink>

You even might want a link to be considered active based on a different URL than the one it actually points to.

Copy code
<NavLink
  to="/profile/edit"
  customActiveUrl="/profile"
  activeClassName="active"
  className="nav-link"
>
  Edit Profile
</NavLink>

Styling Links

You can style active and inactive links easily:

<NavLink
  to="/dashboard"
  activeClassName="text-bold text-primary"
  inActiveClassName="text-muted"
  className="nav-link"
>
  Dashboard
</NavLink>

Disabling Redirection

Need a link that doesn’t actually navigate for some reasons? No problem:

<NavLink to="/settings" redirection={false} className="nav-link">
  Settings
</NavLink>

Using matchMode

Exact Match

Want the link to be active only when the URL exactly matches? Use this:

<NavLink
  to="/log"
  matchMode="exact"
  activeClassName="active"
  className="nav-link"
>
  Log
</NavLink>

Starts With Match

Make the link active for any path that starts with the specified path:

<NavLink
  to="/blog"
  matchMode="startsWith"
  activeClassName="active"
  className="nav-link"
>
  Blog
</NavLink>

Includes Match (Default)

By default, NavLink matches if the path is included as a substring:

<NavLink to="/profile" activeClassName="active" className="nav-link">
  Profile
</NavLink>

Contributing

Contributions are welcome! If you have suggestions, bug reports, or feature requests, feel free to open an issue or submit a pull request.

License