Active links

The current link gets aria-current="page" – style it with plain CSS, no classes.

After navigation, the link to the current route gets aria-current="page". You style it with no extra classes – just CSS.

Style the active linkcss

nav a[aria-current="page"] {
  font-weight: 700;
}

/about, /about/, /about.html and /about/index.html all count as the same route.

Keep a parent link lit

To keep a section's parent link highlighted across its child pages, add data-sparke-active. A trailing * is a prefix wildcard; a plain value adds an extra exact route.

Section highlightinghtml

<a href="/blog" data-sparke-active="/blog/*">Blog</a>
<!-- lit under /blog -->

<a href="/pricing" data-sparke-active="/plans">Pricing</a>
<!-- alias route -->

<a href="/shop" data-sparke-active="/shop/* /sale">Shop</a>
<!-- OR-ed -->

Matches get the same aria-current="page" – so your one CSS rule covers both exact and section-level highlighting.