Show Active Link with Gastby

Before you go all crazy throwing together a quick JavaScript snippet for adding an active class name to the links in your navigation, take a moment to look further into the Gatsby Link API.

Using activeClassName will add a class name to the Link when it's active. Alternatively you can use activeStyle which is just a style object that is applied when the current link is active.

import React from 'react'
import { Link } from 'gatsby'

const MainNav = () => (
  <nav>
    {/* using activeClassName */}
    <Link to="/" activeClassName="is-active">
      Home
    </Link>

    {/* using activeStyle */}
    <Link to="/contact/" activeStyle={{ color: `purple` }}>
      Contact
    </Link>
  </nav>
)

It's really that simple.

You're also able to use partiallyActive, which allows you to partally match the current URL. e.g. /blog/funky-post-name/

import React from 'react'
import { Link } from 'gatsby'

const MainNav = () => (
  <nav>
    <Link to="/blog/" activeStyle={{ color: `purple` }} partiallyActive={true}>
      Blog
    </Link>
  </nav>
)