DropdownMenu | DropdownMenuTrigger

Description#

  • Component that opens the dropdown menu via click or keyboard interaction.
  • Uses a render function to clone the child and apply ARIA attributes directly.
  • Can act as a wrapper (as-child disabled) or clone the child without a wrapper (as-child enabled).

Props#

  • asChild (boolean) — Clones the child without a wrapper, applying attributes directly. Default: false.
  • disabled (boolean) — Disables the trigger. Default: false.

Usage#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script setup lang="ts">
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from 'vue-libvasak'
</script>

<template>
  <!-- With wrapper (div) -->
  <DropdownMenu>
    <DropdownMenuTrigger>
      <button>Open</button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem @select="console.log('ok')">
        Accept
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>

  <!-- Without wrapper: attributes on the button -->
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <button class="custom-class">Open</button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem @select="console.log('ok')">
        Accept
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Notes#

  • Enter, space, arrow down, and arrow up open the menu. Escape closes it.
  • With as-child, ARIA attributes apply directly to the button, not to a wrapper.
  • preventDefault on keyboard prevents the browser’s synthetic duplicate click.
← Previous
DropdownMenu | DropdownMenuSeparator
Next →
Data | StatTile