Mantine NavLink with Remix NavLink

[timmclean]

Normally when I use the NavLink component from Remix, it automatically becomes "active" when the current page URL matches the value of the to prop. Is there a way to get this behaviour with Mantine's NavLink component?

I read about renderRoot. I could use that to render Mantine's NavLink as a Remix NavLink. But I don't know how to get the "active" state up from the Remix NavLink to the Mantine NavLink so that I can take advantage of Mantine's "active" styling.

[bhuynhdev]

Since May 11 2024, after PR #6180 is merged so that Mantine can apply active styles to NavLinks with aria-current='page'. this has been quite easy

This is because Remix Navlink auto add aria-current='page' to active nav links, and thus will automatically trigger Mantine's styling. So you just need to renderRoot to Remix NavLink component, and specify the to prop

// Simply use RemixNavLink for `renderRoot`.
// Don't even need to include MantineNavLink's `href` prop. Just need the `to` in RemixNavLink
<MantineNavLink label="Home page" renderRoot={(props) => <RemixNavLink to='/page' {...props} />} />

// You can even make it into a component
/**
 * Extend Mantine's NavLink to render as a RemixNavLink, so the "active" state from Remix is connected to Mantine's style
 **/
import { NavLinkProps as MantineNavLinkProps, ElementProps, ...} from "@mantine/core"
 
function MyNavLink(props: MantineNavLinkProps & ElementProps<"a", keyof MantineNavLinkProps>) {
  return (
    <MantineNavLink {...props} renderRoot={({className}) => <RemixNavLink to={props.href} className={className} />}>
      {props.children}
    </MantineNavLink>
  )
}

<MyNavLink href="/page" label="Home page" />

[corydeppen]

@bhuynhdev I don't believe the href prop is needed on the Mantine NavLink when a Remix NavLink is being rendered as the root element. Here's a quick example.

[bhuynhdev]

Oh that's even better. Thanks. I have updated my comment to reflect this tip.