Dropdown Menu

Last updated

2026-10-04 UTC

Demo

dropdown-menu/demo.vue

Last selected: (none)

<script setup lang="ts">
import { ref } from 'vue'

const last = ref('')
const items = [
  { label: 'Profile', value: 'profile' },
  { label: 'Wallet', value: 'wallet' },
  { label: 'Preferences', value: 'settings' },
  { separator: true },
  { label: 'Sign out', value: 'logout' },
]
</script>

<template>
  <div class="flex flex-col gap-3">
    <YlfDropdownMenu :items="items" @select="last = $event">
      <template #trigger>
        <YlfButton variant="secondary">
          Menu ▾
        </YlfButton>
      </template>
    </YlfDropdownMenu>
    <p class="text-sm op-70">
      Last selected: {{ last || '(none)' }}
    </p>
  </div>
</template>

Dropdown Menu uses Reka UI for positioning, arrow/Home/End/typeahead navigation and focus. Tokens define visuals.

Props

Prop	Description	Type	Default
items	Menu items	readonly MenuItem[]	—
v-model:open	Open state	boolean	false
portalTo	Existing overlay container within the theme	string | HTMLElement	ConfigProvider / body

Class, data/ARIA attributes and events forward to menu content. portal-to targets an existing local theme container; otherwise ConfigProvider/body is retained. Arrows, Home/End, Enter and Escape navigate, select and close; disabled items are skipped.

MenuItem

Field	Description	Type
label	Label	string
value	Selected value	string
disabled	Disabled	boolean?
separator	Render a separator	boolean?

Events

Name	Description
select	Emits the selected value

An empty string value can mean “All” or “Clear filter” and still emits select. Items without a value emit no selection.