DropdownMenu | DropdownMenuLabel

`DropdownMenuLabel`#

Description#

Section title for grouping items within the dropdown menu.
Not an interactive option: uses role="presentation" and yields its id to the menu for aria-labelledby.

Props#

No props accepted: it is a static text component.

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
<script setup lang="ts">
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem } from 'vue-libvasak'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <button>File</button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>Edit</DropdownMenuLabel>
      <DropdownMenuItem @select="console.log('copy')">
        Copy
      </DropdownMenuItem>
      <DropdownMenuItem @select="console.log('paste')">
        Paste
      </DropdownMenuItem>
      <DropdownMenuLabel>Export</DropdownMenuLabel>
      <DropdownMenuItem @select="console.log('pdf')">
        Export as PDF
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>