#DropdownMenu on Hover Mode

3 messages · Page 1 of 1 (latest)

hollow pecan
#

Hello,
I'm currently migration a project from NuxtUI v2 to v3/v4 and in the past it was possible to have the Dropdown expand on hover instead of click, because it's just more convenient.

This is my component currently.

<template>
  <UDropdownMenu :modal="false" :items="items">
    <UButton :label="user.global_name" color="primary" trailing-icon="i-heroicons-chevron-down-20-solid" />
  </UDropdownMenu>
</template>

I've found this issue, but the workaround is not working.
https://github.com/nuxt/ui/issues/2138

<template>
  <UDropdownMenu v-model:open="open" :modal="false" :items="items">
    <UButton :label="user.global_name" color="primary" trailing-icon="i-heroicons-chevron-down-20-solid"     @pointerenter="open = true" @pointerleave="open = true" />
  </UDropdownMenu>
</template>

because when I hover it, it's expanding, but once I over down the cursor it disappears again, because it's not the button anymore.
It's also not working when I add the events to the "UDropdownMenu" element.

Does anyone have an idea how I can achive the old on hover behavior again?

wicked spokeBOT
#

Hi @hollow pecan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources, the DropdownMenu component in Nuxt UI v3/v4 does not have a built-in hover mode like some other components do. However, I can see that the Popover component does support a mode prop that can be set to "hover".

Unfortunately, the DropdownMenu component doesn't expose this same functionality directly. The knowledge sources show that DropdownMenu has props for controlling the open state (v-model:open, default-open) and emits an update:open event, but there's no mode prop available.

Possible Workaround

While not ideal, you could consider using a Popover component with hover mode instead of DropdownMenu if the hover behavior is essential for your use case. The Popover component supports mode="hover":

<template>
  <UPopover mode="hover">
    <UButton 
      :label="user.global_name" 
      color="primary" 
      trailing-icon="i-heroicons-chevron-down-20-solid" 
    />

    <template #content>
      <!-- Your menu content here -->
    </template>
  </UPopover>
</template>

When using hover mode, you can also control delays with the open-delay and close-delay props.

Migration Note

As mentioned in the migration guide, Nuxt UI v3 has been rebuilt from the ground up, and some features from v2 may not have direct equivalents. If hover mode for DropdownMenu is critical for your project, you might want to report this as a feature request on the GitHub repository.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: