Next.js Discord

Discord Forum

Is There Any Way To Access What Page A User Is At And Modify My Navbar To Highlight The Page?

Eurasian Collared-Dove posted this in #help-forum
Open in Discord
Eurasian Collared-DoveOP
Hey, this is probably a pretty simple question for someone experienced in next, but I'm really not. Basically I have a navbar that is displayed at the top of my page in my layout.tsx, I have one class on the links in the navbar for displaying a background color and one property inside of my HoverEffect element for active={activeColor} which just sets the background color, my code is currently:
<HoverEffect active={navbarActiveColor} color={navbarHoverColor}>
    <Link href="/">Home</Link>
<HoverEffect color={navbarHoverColor}>
    <Link href="/schedule">Schedule Appointment</Link>
<HoverEffect color={navbarHoverColor}>
    <Link href="/gallery">Our Work</Link>
//Active denotes that the background should be solid, how can I update active to be the correct link when the user is at the corresponding /schedule or /gallery?

Thank you in advance for any and all help!

0 Replies