How to style the currently active link in Gatsby
February 6, 2020
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>
Add a CSS class to the currently active link
<Link
to="/about/"
activeClassName="active"
>
About
</Link>
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.