How should we handle a DropdownMenu that opens on Hover?

[nikosrossolatos]

I was wondering what would be the proper way to support opening a dropdown menu on hover. Currently I've implemented it roughly like this

export default function Dropdown({ trigger }) {
  if (trigger === 'hover') {
    return <TooltipPrimitive>{children}</TooltipPrimitive>
  }
  return <DropdownPrimitive>{children}</DropdownPrimitive>
}

Where the children are custom elements and i am losing the DropdownItem accessibility goodies.

[benoitgrelard]

The DropdownMenu pattern isn't really geared towards opening on hover.
Have you seen NavigationMenu?

[nikosrossolatos]

Hey Benoit! Thank you for the quick reply! Yeah I've seen the Navigation Menu but it feels like it's not what i am looking for? Since i only need one button that also opens on hover and has the dropdown. Plus I need the ability for some Dropdowns to open using a click (hence the if/else statement in my example)

[benoitgrelard]

UX-wise it would be very strange to have some of them open on hover and some on click though. Users wouldn't be expecting that.

[alekseykurylev]

@benoitgrelard, please tell me, how can I make a "Navigation Menu" with drop-down sections like the "Menu Bar" or "Dropdown Menu" component?

[benoitgrelard]

Have you looked at the NavigationMenu primitive?