[Navigation Menu] What is the proper way to use with next/link

[DanielBailey-web]

I am curious what the best way to use NavMenu.Link with next/link is.
Currently I am doing this, which doesn't seem like the best way, but also I don't actually have any problems with it.

import type { FC } from "react";
import { Link as NavLink } from "@radix-ui/react-navigation-menu";
import Link, { LinkProps } from "next/link";

export const MainMenuControlLink: FC<LinkProps> = ({
  children,
  ...props
}) => (
  <Link shallow {...props} passHref>
    <NavLink className="classes-for-my-link">
      {children}
    </NavLink>
  </Link>
);

It's weird that I need to use passHref for it to work when the NavLink (from radix-ui) is of type anchor. Which normally means I do not have to use passHref.

[benoitgrelard]

Hi @DanielBailey-web,

I haven't played much with next, but from what I understand looking at the docs, you are doing the right thing and passHref is needed because NavLink is a custom component that wraps a a.

Source:
https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag

[DanielBailey-web]

@benoitgrelard A weird quirk of doing it this way is that the URL doesn't appear in the bottom left when you hover over it. (it does redirect correctly however) Is that an accessibility issue?

[benoitgrelard]

That's odd. Not even sure how that's possible… As long as it ends with a a tag and and href attribute in the DOM, it should be fine really.

[GraemeFulton]

I got this to work by wrapping the StyledLink with the nextjs Link. I can tab through things, so looks like this method is accessible, but I don't know if there are issues with doing it this way:

const NavigationMenuLink = NextLink;

const NextLink = ({ children, ...props }) => {
  // const resolved = useResolvedPath(href);
  // const match = useMatch({ path: resolved.pathname, end: true });
  // const isActive = Boolean(match);
  return (
    <Link href={props.href} passHref>
        <StyledLink asChild>
          <a style={props.css} {...props}>
          {children}
          </a>
        </StyledLink>
    </Link>
  );
};

const StyledLink = styled(NavigationMenuPrimitive.Link, {
  ...itemStyles,
  display: 'block',
  textDecoration: 'none',
  fontSize: 15,
  lineHeight: 1
});

Although I didn't yet figure how to set the active link using the example with router code so commented it out. Those don't work with nextjs link :

// const resolved = useResolvedPath(href);
  // const match = useMatch({ path: resolved.pathname, end: true });
  // const isActive = Boolean(match);

[j0hnm4r5]

I believe you now also need to use legacyBehavior.

[joaom00]

I think now in the most recent version you can use like this

<NavigationMenu.Item>
    <NavigationMenu.Link asChild>
        <NextLink href="..." />
    </NavigationMenu.Link>
</NavigationMenu.Item>

[j0hnm4r5]

When I tried that, Next was throwing an error about nesting <a> tags, but legacyBehavior fixed it for me.

[joaom00]

Weird, I tried here and seems to be working, no nesting <a> and no errors on console. Are you using asChild prop in NavigationMenu.Link?

[Migggz]

@joaom00 Thanks! this works for me
@j0hnm4r5 make sure you use asChild in NavigationMenu.Link

[58bits]

Hi All - just in case anyone else comes across this - we solved this by creating a special useNavigation hook that in turn calls Next.js router.push or router.replace depending on options passed to our navigate function.

We ended up doing this because of the way Radix menu items internally call onPointerDown to set focus (and whatever styling you have based on that), which in turn meant that events were not flowing down to our specially wrapped language-aware version of the Next.js Link component (unless we also listened for onPointerDown which isn't ideal as this has usability issues on mobile during a press and scroll).

We then placed an onClick handler on the NavigationMenu.Item component, and handled our navigation there - including a progress indicator.

Hope this helps.