ActionMenu

A compact ⋮ (three-dot) vertical menu that shows a dropdown list of actions on click. Closes automatically on outside click.

Basic Usage

Demo

<script setup>
import { Edit, Trash2, Eye } from '@lucide/vue'
import { ActionMenu } from 'praxis-vue-ui'

const items = [
  { label: 'View', lucideIcon: Eye, command: () => console.log('view') },
  { label: 'Edit', lucideIcon: Edit, command: () => console.log('edit') },
  { label: 'Delete', lucideIcon: Trash2, class: 'text-red-500', command: () => console.log('delete') },
]
</script>

<template>
  <ActionMenu :items="items" />
</template>

Props

Props

Prop	Type	Default	Description
itemsrequired	ActionMenuItem[]	—	Array of menu items to render in the dropdown.

ActionMenuItem Interface

interface ActionMenuItem {
  label: string               // Display text for the menu item
  lucideIcon?: Component      // Lucide Vue icon component (imported directly)
  class?: string              // CSS class for the icon (e.g. 'text-red-500')
  command?: () => void        // Function to call when the item is clicked
}

Accessibility

• The trigger button has aria-label="Open actions menu" and aria-haspopup="true".
• Closes on outside click via a global click event listener.
• Each menu item is clickable via keyboard (inherits from native click handling).