Active Links

What are active links? It's the practice of visually highlighting the current page in the navigation. For example, this page named "Active Links" 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:

  • Create a new component <Link>.
  • <Link> uses usePageContext() to access pageContext.urlPathname.
  • <Link> checks whether const isActive = href === pageContext.urlPathname and sets a CSS class accordingly <a class="is-active">.


You cannot use window.location.pathname if you use SSR, because it isn't available when the page is rendered on the server-side. If you have set ssr: false, then you can use window.location.pathname instead of pageContext.urlPathname.