How to style the currently active link in Gatsby

January 23, 2021

In Gatsby, you using the <Link> component to create links to other pages on your Gatsby site.

It's fairly common to highlight the currently active page in a site navigation bar, to show a visitor where in the navigation they are. Gatsby's <Link> component provides a built-in way to style a link that points to the current page.

Add CSS to the currently active class

<Link
  to="/about/"
  activeStyle={{
    color: "blue",
    fontWeight: 700
  }}
>
  About
</Link>
<Link
  to="/about/"
  activeClassName="active"
>
  About
</Link>

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!