OYNA

DropdownMenu ​

A menu of actions that drops down from a button. Arrow keys move through it, typing jumps to an item, Esc closes it.

vue
<script setup lang="ts">
import type { DropdownMenuItem } from 'oyna-ui'
import { Archive, Copy, Pencil, Trash2 } from '@lucide/vue'

const items: DropdownMenuItem[] = [
  { label: 'Rename', icon: Pencil, hint: 'F2', onSelect: rename },
  { label: 'Duplicate', icon: Copy, onSelect: duplicate },
  { label: 'Archive', icon: Archive, disabled: true },
  { separator: true },
  { label: 'Delete', icon: Trash2, tone: 'danger', onSelect: remove },
]
</script>

<template>
  <ODropdownMenu :items="items">
    <OButton>Actions</OButton>
  </ODropdownMenu>
</template>

The slot takes exactly one element that can receive focus; it becomes the trigger.

  • icon is an icon component, such as one from Lucide. Give icons to all items of a menu or to none.
  • hint is a dim note at the end of an item. It only shows text: binding the key is up to you.
  • tone: 'danger' is for the action that destroys something. One per menu, last, after a separator.

A menu is for actions. To choose a value, use a select. For the same items on a right click, there is a context menu.

While the menu is open, page hotkeys are off.

Props ​

PropTypeDefaultDescription
itemsDropdownMenuItem[]required{ label, icon?, hint?, tone?, disabled?, onSelect? } or { separator: true }
side'top' | 'right' | 'bottom' | 'left''bottom'Flips when there is no room
align'start' | 'center' | 'end''start'Which edge of the trigger the menu lines up with

Built on Reka UI DropdownMenu.