How To Add Styling To An Active Link In NextJS

For my latest project, I wanted to change the background color of the active navigation link in the <Header> when being clicked. When working with <Link> in React (using React-Router) in the past, I had the possibility to add an activeClassName to the <Link> to change the style when being active. But this built-in <Link> is not available in NextJS. Let me show you the differences and how you can add an active class to a <Link> in NextJS.

---

Table Of Contents

1. React's activeClassName
2. Create An Active Link In NextJS

---

1. React's activeClassName

This special version of the <Link> tag is called <NavLink> and adds styling attributes to the rendered element when it matches the current URL. There are two different ways to add styling.

activeClassName: string

The class is given to the element when it is active by writing:

<NavLink to="/about" activeClassName="active">
  About
</NavLink>

activeStyle: object

The styles is applied to the element when it is active by writing:

<NavLink to="/about" activeStyle={{fontWeight: "bold"}}>
  About
</NavLink>

2. Create An Active Link In NextJS

The default <Link> component from NextJS doesn't allow to distinguish between active and non-active links. In NextJS, you can use the built-in router to detect an active link.

I am using the useRouter hook inside my "Header function component" and created a ternary operator to check if the <Link> to style matches the currently displayed route.

Here's the code:

import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();

  return (
    <header>
      <Link href="/">
        <a className={router.pathname == "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

For more information on next/router check out the documentation.

---

Thanks for your reading and time. I really appreciate it!

Comments

[steve-jaison2]

how to acheive in Server Component
is it possible?

[Matt Litherland]

For Next.js 13

Replace import { useRouter } from 'next/router';
With import { usePathname } from "next/navigation";

Replace const router = useRouter();
With const pathname = usePathname();

and then replace className={router.pathname == "/" ? "active" : ""}
with className={pathname == "/" ? "active" : ""}

Ref: usePathname

[Nghia La]

Works perfectly for Next.js 14 using Pages Router.

[Pragati Verma]

Thanks for adding Matt!

[Rishabh]

Take a look at this solution and please let me know your thoughts.
Highlight active links in next.js

[Syntax Sage]

what would be the best way to make this code more DRY, cos if you got like 20 links this is going to be a pain to maintain

[Satyam Mishra]

@syntaxsage Using a loop to render navigation items in a separate function and doing "router.pathName = href" might help in a large navigation list.

[Juan Fernando Giraldo Cardona]

I thank you for taking the time to write this post!
Sadly for Nextjs version 13, your 2 approach seems to be outdated because is an invalid action to have a component with an tag as child (unless you are willing to use "legacybehavior").
With your post you gave me an idea. This solution is a bit raw because still unable to use active pseudo-class in the component

<Link
    className={router.pathname == "/" ? "active" : ""}
    href="/"
 >
    Home
 </Link>

"active" is a set of styles defined in css module.
Let me know if you find something better. Best regards

[Syntax Sage]

why not use tailwind instead of css classes

[Julia 👩🏻‍💻 GDE]

Hey Juan, thanks for your message. Yeah, wrote that post a long time ago, but I don‘t think I will spend time on this topic any time soon again.

I am sure others are happ about your suggestions, so thank you for that.

[Abdulhameed Ibrahim]

Thanks author you're a life saver.

[w3bdesign]

I would recommend extracting this to a separate function. Then you can do the following:

const activeLink = (url: string, pathname: string) => pathname === url ? "navbar-link-active" : "";

Then you can do something like this in your links (if you use string literals):

${activeLink(link.url, router.pathname)

[eray Bartan]

julia it's fantactic tricks
how to change actve style in nextjs?
you save my day. tahnks a lot.

[akash shrestha]

Great but I am using dynamic pathname and it doesn't work for me.
router.asPath may help

[Julia 👩🏻‍💻 GDE]

That's too bad. I hope you find a solution for your case soon.

[Victor Chweya]

You are a life saver, thanks for this