Join the conversation

Gatsby.js

General

A channel about Gatsby, which includes GraphQL, React, static site generators, Redux, JavaScript, serverless.

More active conversations

Gatsby.js / General

Best way to show Active Links in the navigation

Gatsby.js/General · January 25, 2018 at 2:10pm

Tanay Karnik

@tanay

Best way to show Active Links in the navigation

Gatsby.js / General · January 25, 2018 at 2:10pm (Edited 1 year ago)

Alright. So what I want to do is pretty standard and must have been accomplished by many of you.
In the navigation menu, generated by a layout, if a link item links to the current page, I want it to be styled differently.
Of course, given how powerful & flexible Gatsby is, I can think of a few ways in which this could possibly be accomplished. But, since I'm new to Gatsby, I'm not sure what would be the most elegant (clean & flexible) way.
Your thoughts?

January 26, 2018 at 7:46am

Benjamin Read@endymion1818

7:46am

You can use activeClassName on the link.

January 26, 2018 at 11:39pm

Benjamin Read@endymion1818

11:39pm

<Link to="/some/place/" activeClassName="active">Some Place</Link>

January 27, 2018 at 3:43am

Tanay Karnik@tanay

3:43am

Wow. Is it that simple? Thanks.

April 28, 2018 at 10:09pm

Mario Hernandez@mario-hernandez

10:09pm

I'm using the activeClassName prop but I end up with multiple links getting the "active" class. Any ideas on why this is and most importantly, how to fix?

10:16pm

I figured out if I use exact to= rather than just to= it works.