Skip to content

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>

API Reference