For my latest project, I wanted to change the background color of the active navigation link in the <Header> when being clicked. When working...
For further actions, you may consider blocking this person and/or reporting abuse
Just a reminder to those who are reading this, that if you insert
<a/>wrapped inside a custom component inside<Link/>that you should includepassHrefif the<a/>wraps anything other than a string, otherwise your site may take a hit on SEO.Wow, thanks for this information, didn't know about that.
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
"active" is a set of styles defined in css module.
Let me know if you find something better. Best regards
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.
why not use tailwind instead of css classes
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
Thanks for adding Matt!
Works perfectly for Next.js 14 using Pages Router.
julia it's fantactic tricks
how to change actve style in nextjs?
you save my day. tahnks a lot.
Thanks author you're a life saver.
This helped me out tremendously. Helped me out so much that I created an account just to say thank you!
Thank you so much for your kind words :) Glad it helped!
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!
Glad that it helped :)
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.
Hey Matt. Thank you so much for your suggestion. I changed the img to code blocks and will continue doing that :)
I would recommend extracting this to a separate function. Then you can do the following:
Then you can do something like this in your links (if you use string literals):
thank you it was very useful
There’s a typo in the code.
should be:
Thank you, I fixed it :)
Take a look at this solution and please let me know your thoughts.
Highlight active links in next.js
You are a life saver, thanks for this
how to acheive in Server Component
is it possible?
Great but I am using dynamic pathname and it doesn't work for me.
router.asPath may help
That's too bad. I hope you find a solution for your case soon.
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
@syntaxsage Using a loop to render navigation items in a separate function and doing "router.pathName = href" might help in a large navigation list.