Introduction

In Gatsby, the <Link> component is used to create links to other pages on your Gatsby site. It will automatically detect the active page and provides two options for adding styles to the active link:

  • activeStyle — a style object that will be applied when it is active.
  • activeClassName — a class name that will be added to the Link when it is active.

Example 1 - Adding stylings to the active link

import { Link } from "gatsby"
//...
<Link
  to="/about/"
  activeStyle={{
    fontWeight: 600,
    textDecoration: "underline"
  }}
>
  About
</Link>

Example 2 - Adding a CSS class to the active link

import { Link } from "gatsby"
//...
<Link
  to="/about/"
  activeClassName="active"
>
  About
</Link>