oa/documentation/dropdown/dropdown-button-hover-documentation.md

Hover buttons

Vuero's <VDropdown /> component can also be opened on hover or after any custom event. Please refer to the markup for more details about usage.

<template>
  <VDropdown>
    <template #button="{ open, toggle }">
      <VButton
        icon="lucide:help-circle"
        class="is-trigger"
        @mouseenter="open"
        @focusin="open"
        @click="toggle"
      >
        Hover me!
      </VButton>
    </template>

    <template #content="{ close }">
      <div
        role="button"
        tabIndex="0"
        @mouseleave="close"
        @focusout="close"
      >
        <a href="#" class="dropdown-item"> Dropdown item </a>
        <a href="#" class="dropdown-item"> Other dropdown item </a>
        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
        <a href="#" class="dropdown-item"> Other dropdown item </a>
        <hr class="dropdown-divider">
        <a href="#" class="dropdown-item"> With a divider </a>
      </div>
    </template>
  </VDropdown>
</template>

Hover me!

Dropdown item Other dropdown item Active dropdown item Other dropdown item

---

With a divider

Hover me!

Dropdown item Other dropdown item Active dropdown item Other dropdown item

---

With a divider