Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Gatsby.js

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

Gatsby.js / General

Best way to show Active Links in the navigation

Best way to show Active Links in the navigation

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

Best way to show Active Links in the navigation

Gatsby.js / General · January 25, 2018 at 2:10pm(Edited 9 months 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

You can use activeClassName on the link.

  • reply
  • like

January 26, 2018 at 11:39pm

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

like-fill
2
  • reply
  • like

Wow. Is it that simple? Thanks.

  • reply
  • like

April 28, 2018 at 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?

  • reply
  • like

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

like-fill
1
  • reply
  • like

May 8, 2018 at 3:03am

that simple huh. yay!

  • reply
  • like

July 2, 2018 at 4:08am

Thanks! This helped me out as well.

  • reply
  • like

August 26, 2018 at 12:26am

Thanks all!

  • reply
  • like

August 27, 2018 at 9:21am

Please note:

With Gatsby v2 there's no exact anymore. You'll need to use getProps

https://reach.tech/router/api/Link

like-fill
1
  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```