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">.

Examples:

• React: /boilerplates/boilerplate-react/renderer/Link.jsx
• Vue: /boilerplates/boilerplate-vue/renderer/Link.vue

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.