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>
)