Gatsby Link not working with isPartially Active on MDX rendered pages

Question

I have been building out a static site with gatsby and a few sections I have rendered out pages written as MDX and parsed through their own layouts. This is all via the gatsby-plugin-mdx file and it works great.

However, I'm trying to get the top-level navigation to highlight as active when a user navigates to a sub-page in that section. I am using the code from the Gatsby docs and it works on the pages I created as normal JS files.

Example:

<Link partiallyActive={true} activeClassName="header-nav-active" to={menu.url} title={menu.title}>
  {menu.label}
</Link>

It seems that it doesn't seem to work for the MDX pages, even though what is rendered in location.pathname is the same. My current structure is:

src
-pages
--section
----section-subpage.js
--other section
----other-section-sub
-----index.mdx
----other-section-sub-2
-----index.mdx

Ultimately if you look at this layout I would like "Figma" to be highlighted as active when you are navigating though the sub pages in that section.

Answer 1

Have you tried using getProps helper function? Because Gatsby's router extends from React's (@reach/router) you can take advantage of the advanced props to customize your style

You can create a partiallyActive link like:

const isPartiallyActive = ({ isPartiallyCurrent }) => {
  return isPartiallyCurrent
    ? { className: 'navlink-active navlink' }
    : { className: 'navlink' }
}

const PartialNavLink = props => (
  <Link getProps={isPartiallyActive} {...props}>
    {props.children}
  </Link>
)

And then simply use:

 <PartialNavLink to="/figma">Figma</PartialNavLink>

Or in an unrefined way:

<Link getProps={({ isPartiallyCurrent }) => isPartiallyCurrent ? { className: "active" } : null } to={"/figma"}>
Figma
</Link>