Next Js Active NavLink Link

Demo

Authors

• @AbtahiHasan

Documentation

Documentation

Installation

install with npm

npm i next-js-active-route

install with yarn

yarn add next-js-active-route

install with pnpm

pnpm install next-js-active-route

Usage/Examples

import { NavLink } from "next-js-active-route";

const Demo = () => {
  return (
    <>
      <ul>
        <li>
          <NavLink
            href="/"
            exact={true}
            activeClassName="bg-green-600"
            className="border"
          >
            Home
          </NavLink>
          <NavLink
            href="/blogs"
            activeClassName="bg-green-600"
            className="border"
          >
            Blogs
          </NavLink>
        </li>
      </ul>
    </>
  );
};

export default Demo;

Props

Props	Type	Description
href	string	Required it's url page url
activeClassName	string	Required this all classes applied when your route is active
children	ReactNode	Required for example Blog
className	string	Optional you can use any classNames
exact	boolean	Optional if you want to exact match for example your path is ('/')
***	any	Optional that accept component