Dropdown Menu
The Dropdown menu: a concise, user-friendly interface for effortless option selection.
Usage
vue
<script setup lang="ts">
import { DropdownMenu, DropdownMenuItem, PrimaryButton } from '@youcan/ui-vue3';
</script>
<template>
<DropdownMenu position="bottom">
<PrimaryButton>
Primary Button
</PrimaryButton>
<template #MenuItems>
<DropdownMenuItem label="Account" />
<DropdownMenuItem label="With accessory">
<template #accessory>
<i class="i-youcan:rocket-launch" />
</template>
</DropdownMenuItem>
<DropdownMenuItem label="Logout" class="custom-class">
<template #icon>
<i class="i-youcan:sign-out" />
</template>
</DropdownMenuItem>
</template>
</DropdownMenu>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24