Best way to have my nav links remain underlined when on the corresponding page in nextjs? | Next.js | Page 1

dusty maple Dec 8, 2022, 12:32 AM

#

Hi! I was wondering what the best way is to have my nav links remain underlined when on the corresponding page in nextjs? can this be done with css? at the moment they're just underlined when on hover and I've done this using TailwindCSS

icy pike Dec 8, 2022, 4:28 AM

#

you can read the pathname property from the router and if it makes the path of the nav link then you apply the underline https://nextjs.org/docs/api-reference/next/router#userouter

next/router | Next.js

Learn more about the API of the Next.js Router, and access the router instance in your page with the useRouter hook.

dusty maple Dec 8, 2022, 10:36 AM

#

icy pike you can read the ` pathname` property from the router and if it makes the path o...

does this still apply if my code is written like this?

icy pike Dec 8, 2022, 4:31 PM

#

yeah

dusty maple Dec 12, 2022, 4:18 PM

#

icy pike yeah

ok great thanks! I've managed to implement it, but now all my links are permanently underlined instead of just when clicking on the corresponding page, this is my code

#

#

#Best way to have my nav links remain underlined when on the corresponding page in nextjs?