Getting Started

Choose adapter

• Vue 3: @affino/menu-vue
• React 18: @affino/menu-react
• Laravel runtime: @affino/menu-laravel via @affino/laravel-adapter

Install

Vue

pnpm add @affino/menu-vue

React

pnpm add @affino/menu-react

Laravel runtime

pnpm add @affino/menu-laravel @affino/laravel-adapter

First dropdown

Vue

<script setup lang="ts">
import { UiMenu, UiMenuTrigger, UiMenuContent, UiMenuItem } from "@affino/menu-vue"
</script>

<template>
  <UiMenu>
    <UiMenuTrigger asChild>
      <button type="button">Actions</button>
    </UiMenuTrigger>
    <UiMenuContent>
      <UiMenuItem id="rename">Rename</UiMenuItem>
      <UiMenuItem id="duplicate">Duplicate</UiMenuItem>
    </UiMenuContent>
  </UiMenu>
</template>

React

import { UiMenu, UiMenuTrigger, UiMenuContent, UiMenuItem } from "@affino/menu-react"

export function ActionsMenu() {
  return (
    <UiMenu>
      <UiMenuTrigger asChild>
        <button type="button">Actions</button>
      </UiMenuTrigger>
      <UiMenuContent>
        <UiMenuItem id="rename">Rename</UiMenuItem>
        <UiMenuItem id="duplicate">Duplicate</UiMenuItem>
      </UiMenuContent>
    </UiMenu>
  )
}

Submenus and context menu

• Use UiSubMenu for nested actions.
• Use trigger="contextmenu" on trigger primitives for right-click menus.

Next steps

• Patterns: /menu/examples
• Styling: /menu/styling-and-animation
• Core internals: /core/menu-core