DropdownMenu | DropdownMenuSeparator

`DropdownMenuSeparator`#

Description#

Horizontal line that separates groups of items within the dropdown menu.
Uses role="separator" so screen readers distinguish the lists of options on each side.

Props#

No props accepted: it is a purely decorative and semantic element.

Usage#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup lang="ts">
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from 'vue-libvasak'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <button>More actions</button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem @select="console.log('rename')">
        Rename
      </DropdownMenuItem>
      <DropdownMenuItem @select="console.log('duplicate')">
        Duplicate
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem danger @select="console.log('delete')">
        Delete
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>