Is it possible to click trigger submenu, not hover?

[guijiangheng]

Currently submenu is opened by hover TriggerItem, but on some occasion, for example click show more button to expand submenu is preferred. Is this behavior supported?

[guijiangheng]

Just like this UI design

[jjenzz]

Are you wanting a menu to open when user clicks the ... or Default View?

@andy-hook @benoitgrelard If the former, I'm wondering if this could be another case where we could consider exposing Menu.Sub as a separate part so that people can create menus within menus, instead of submenus.

I'm not sure of the a11y implications though...

[benoitgrelard]

Yeah I'm not sure how that would be accessible still… How would you navigate it keyboard-wise? It wouldn't work as a single tab-stop anymore…

[icoloma]

I have a similar issue. I would like this submenu (vertical layout, submenus appear under the selected menu item) to display when I click on "Tickets" instead of when I hover. Hovering in this case is super distracting, because the options jump up and down when you move the cursor through the menu items (keyboard works fine).

I know that this is not the typical layout (Sub is displayed under the Trigger, not to the right), but is NavigationMenu the wrong component for this?

EDIT It seems that this case is not that different from the index in the documentation for radix-ui, so maybe I'm overdesigning and should just sprinkle some aria roles over links and navs

[vitharanagedonjani-i2e]

https://codesandbox.io/s/radix-navigation-to-keep-the-submenu-open-36ogr4?file=/pages/navigation.tsx

@benoitgrelard So here I got 2 menu items and I want keep them at open state after I click on any one of them. (Shouldn't be able close)

[benoitgrelard]

It looks like there's a bunch of code still running on pointer enter/leave potentially.
Can I ask you what you're trying to build though? This seems like a weird interaction.

[vitharanagedonjani-i2e]

@benoitgrelard I'm trying to build a SideNav, Which opens the menu items on click(not hover; that's why i'm using the pointer events to disable the hover effect). Also there are places where menu items has sub menus and I use NavigationMenu.Sub for that. I need to preserve them at [data-state="open"] after being opened. Because I'm using an external button to close them. Currently even if I disabled the pointerEvents they are getting closed on click

[djalmaaraujo]

@benoitgrelard I am facing the same situation. Using Navigation Menu to build a sidebar, where usually you click to expand items, not use the hover. Any ideas?

[katannshaw]

I had the same issue and found two approaches in other locations and they both work for me. I decided to use the regular function method.

Using inline function calls (see line 325)
https://codesandbox.io/s/unruffled-robinson-duwvgn?file=/App.js

Using regular function
#1630 (comment)

Hope it helps.

[ofelipevaz]

I solved this problem by using the stopPropagation method on the click event.

<DropdownMenu.Sub open={open}> {/* use "open" in useState */}
    <DropdownMenu.SubTrigger
      onClick={(e) => {
        e.stopPropagation() // prevent menu item select when click
        setOpen(!open)
      }}
     >
       ...
    </DropdownMenu.SubTrigger>
</DropdownMenu.Sub>