DEV Community

Cover image for How To Add Styling To An Active Link In NextJS

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
Collapse
 
chiangs profile image
Stephen Chiang • • 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.

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE •

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

Collapse
 
juanferrgiraldo profile image
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>
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
yuridevat profile image
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.

Collapse
 
syntaxsage profile image
Syntax Sage •

why not use tailwind instead of css classes

Collapse
 
uixmat profile image
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

Collapse
 
pragativerma18 profile image
Pragati Verma •

Thanks for adding Matt!

Collapse
 
leonghia profile image
Nghia La •

Works perfectly for Next.js 14 using Pages Router.

Collapse
 
ebartan profile image
eray Bartan •

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

Collapse
 
ibdul profile image
Abdulhameed Ibrahim •

Thanks author you're a life saver.

Collapse
 
jsingle345 profile image
Joshua Singleton •

This helped me out tremendously. Helped me out so much that I created an account just to say thank you!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE •

Thank you so much for your kind words :) Glad it helped!

Collapse
 
amroyasser profile image
Amr Yasser •

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!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE •

Glad that it helped :)

Collapse
 
itwasmattgregg profile image
Matt Gregg •

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.

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE •

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

Collapse
 
amirreza_dev profile image
Amirreza Kadkhodazadeh •

thank you it was very useful

Collapse
 
w3bdesign profile image
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" : "";
Enter fullscreen mode Exit fullscreen mode

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

${activeLink(link.url, router.pathname)
Enter fullscreen mode Exit fullscreen mode
Collapse
 
peritpatrio profile image
Petri Partio •

There’s a typo in the code.

const router = userRouter();
Enter fullscreen mode Exit fullscreen mode

should be:

const router = useRouter();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE •

Thank you, I fixed it :)

Collapse
 
rishabhrpg profile image
Rishabh •

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

Collapse
 
victorchweya profile image
Victor Chweya •

You are a life saver, thanks for this

Collapse
 
stevejaison2 profile image
steve-jaison2 •

how to acheive in Server Component
is it possible?

Collapse
 
akash_stha01 profile image
akash shrestha • • Edited

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

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE •

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

Collapse
 
syntaxsage profile image
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

Collapse
 
page_source profile image
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.