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 |