DropdownMenu on Hover Mode

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>

<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>

<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?

Nuxt•5mo ago•

3 replies

Ponkhy

DropdownMenu on Hover Mode

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

<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>

<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>

DropdownMenu on Hover Mode

Similar Threads

DropdownMenu on Hover Mode

Similar Threads

Similar Threads

Similar Threads