DEV Community

How To Add Styling To An Active Link In NextJS

Julia 👩🏻‍💻 GDE on April 21, 2021

For my latest project, I wanted to change the background color of the active navigation link in the <Header> when being clicked. When working...

Read full post

Stephen Chiang • Oct 20 '21 • Edited

Just a reminder to those who are reading this, that if you insert <a/> wrapped inside a custom component inside <Link/> that you should include passHref if the <a/> wraps anything other than a string, otherwise your site may take a hit on SEO.

Julia 👩🏻‍💻 GDE • Oct 24 '21

Wow, thanks for this information, didn't know about that.

Juan Fernando Giraldo Cardona • Jan 5 '23

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

Julia 👩🏻‍💻 GDE • Jan 6 '23

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.

Syntax Sage • Mar 5 '23

why not use tailwind instead of css classes

Matt Litherland • May 29 '23

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

Pragati Verma • Jun 6 '23

Thanks for adding Matt!

Nghia La • Mar 8 '24

Works perfectly for Next.js 14 using Pages Router.

eray Bartan • Feb 1 '22

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

Abdulhameed Ibrahim • Sep 6 '22

Thanks author you're a life saver.

Matt Gregg • Jul 9 '21

Just a note, it would be sweet if your code samples were gist embeds or code blocks so people could copy/paste from them. The pictures look nice but it makes it harder to copy.

Julia 👩🏻‍💻 GDE • Aug 1 '21

Hey Matt. Thank you so much for your suggestion. I changed the img to code blocks and will continue doing that :)

w3bdesign • Feb 15 '22

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)

Amr Yasser • Oct 11 '21

I'm a backend developer who has no knowledge in next.js. However, I needed to change something in the front-end. It took me much time trying to figure it out myself. Once I found this post, I could do it. Thanks a lot!