Deviopath › Next.js

Active Nav Link

Easy · Navigation

Navbars usually highlight the link of the section you are in. With usePathname() you get the current path, and you compare it with each link's href.

Write isActive(pathname, href):

- The home link "/" is active only when pathname is exactly "/" (otherwise it would match every page).

- Any other link is active when pathname equals href, or starts with href followed by / (so /blog/post-1 is inside /blog, but /blogger is not).

Next: Show the Current Path