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:

• We create a new component <Link>.
• We make pageContext.urlPathname available to our new component <Link>. See Guides > Access pageContext anywhere.

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

React example:

• /boilerplates/boilerplate-react/renderer/Link.jsx

Vue example:

• /boilerplates/boilerplate-vue/renderer/Link.vue

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.