Active Links

What are active links? It's the practice of visually highlighting the current page in the navigation. For example, this page is called "Active Links" and is highlighted with a gray background in the navigation on the left of this website. The link is said to be "active".

To implement active links:

Our <Link> component checks whether const isActive = href === pageContext.urlPathname and sets a CSS class accordingly <a class="is-active">.

React example:

Vue example:

We cannot use window.location.pathname if we use SSR, because it's not available when our page is rendered on the server-side. If we render our page as SPA, then we can use window.location.pathname instead of pageContext.urlPathname.