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...
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
 
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
 
amirreza_dev profile image
Amirreza Kadkhodazadeh

thank you it was very useful

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.