Active Links

What are active links? It's the practice of visually highlighting the currently selected page in the navigation. For example, we can see this page Active Links highlighted in gray in the navigation on the left of this website; the link in the navigation pointing to this page is said to be "active".

To implement active links we:

Our <Link> component can then check whether the link is active with const isActive = a.href === pageContext.urlPathname and add a CSS class <a class="is-active"> accordingly.

React example:

Vue example:

Unless we render our page as SPA we cannot use window.location.pathname as it's not available while our page is rendered on the server-side.