Active Nav Link not working

[dim linden]

Navlink has been working in my localhost but when deployed it won't work. Attached is the screenshot of my code

[dreamy flame]

This is probably due to how your hoster handles trailing slashes. In my nav I just remove all trailing slashes to keep it consistent with a simple pathname.replace(/\/$/, "") https://github.com/Trombach/astro-homepage/blob/21896486c062fe754ee9b580f35bf257f14fdff2/src/components/Nav/NavLink.astro#L10

if that doesn't work, I would start console logging the value of pathname to see why it breaks

[vivid thunder]

FWIW you can also use Astro.url for easy access to the pathname instead of having to do the whole URL constructor

Note - I don't think this is a solution for your problem, just something related and useful I thought worth sharing

https://docs.astro.build/en/reference/api-reference/#astrourl

[swift remnant]

---
const {href, class: className, ...props} = Astro.props;

const {pathname} = Astro.url;
const isActive = href === pathname || href === pathname.replace(/\/$/, "");
---

<a href={href} class:list={[className, {active: isActive}]} {...props}>
    <slot />
</a>

This is what I have done for NavLink like you have.