How to style active link in gatsby?

| 1 minute read

It is fairly a common UX practice to highlight the currently active page in the website’s navigation. It helps users to easily find out their current location in the website.

Similar to React Router’s <NavLink/> component, Gatsby’s <Link/> component has built in attributes to allow developer to style currently active link in the navigation.

Add CSS to <Link/> Component

<Link
  to="/contact/"
  activeStyle={{
    color: "#000",
    fontWeight: 600
  }}
>
  Contact
</Link>

OR

Add CSS Class to <Link/> Component

<Link
  to="/contact/"
  activeClassName="active"
>
  Contact
</Link>