Navigation menu with buttons

[stuartkeith]

I have a navigation menu with links, and now need to add a button (a "mailto" link is swapped out with a button that opens a contact form overlay for certain users).

It appears that buttons aren't officially supported in a navigation menu - does this mean a navigation menu is no longer appropriate? Nothing's stopping me from adding a button in the JSX but it doesn't really work with the tab and arrow key events. A menu doesn't feel right as 95% of the items are links.

[benoitgrelard]

Hey @stuartkeith, you should be able to use asChild for that.

<NavigationMenuLink asChild>
  <button type="button">My Item</button>
</NavigationMenuLink>

[stuartkeith]

Thanks for getting back to me. I thought I tried that and experienced strange keyboard handling (e.g. pressing the down arrow while focused on a button would scroll the page instead of going to the next link) but I have tried again and it seems fine now - I must have been doing something else wrong. Thanks for your help!

[stuartkeith]

Unfortunately I've run into another problem - because I am opening an overlay, I am combining the NavigationMenuLink with a Dialog.Trigger via forwardRef. The dialog opens, the navigation menu closes, then the dialog immediately closes.

It seems like NavigationMenuLink dispatches the custom navigationMenu.rootContentDismiss event when clicked (https://github.com/radix-ui/primitives/blob/main/packages/react/navigation-menu/src/NavigationMenu.tsx#L615-L621), unless .preventDefault() has been called. But calling .preventDefault() would also stop the dialog from opening in the first place.

I was experimenting and hacked together something where an element listens for navigationMenu.rootContentDismiss and calls .stopPropagation() before it can get to the navigation menu, and that technically works, but just double checking if this is an inherent limitation of the navigation menu, or does Radix have a more streamlined way of handling this? I do wonder if having to keep the navigation menu open while a dialog is open (and having the focus return to the open navigation menu when closed) doesn't really fit into how the navigation menu should work. Thanks again.

[benoitgrelard]

It might be because of how you are composing them, have a look at a similar composition here but with DropdownMenu and Dialog: https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

[stuartkeith]

Thanks for the example, that was helpful. I have it working now. The main difference between the dropdown menu example is I needed to set up the triggers like so:

<Dialog.Trigger asChild>
    <NavigationMenu.Link
        asChild
        onSelect={(event) => {
            event.preventDefault();
        }}
    >
        <button
            type="button"
            ref={forwardedRef}
        >
            Testing
        </button>
    </NavigationMenu.Link>
</Dialog.Trigger>

Thanks!