Menu

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/menu.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/menu.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/menu.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/menu.json
    

Usage

      Copy
      <script setup lang="ts">
import { Menu } from "@/components/ui/menu";
</script>

<template>
  <Menu.Root>
    <!-- … -->
  </Menu.Root>
</template>
    

Composition

      Copy
      Menu.Root
├── Menu.ArrowTip
├── Menu.Arrow
├── Menu.CheckboxItem
├── Menu.Content
├── Menu.ContextTrigger
├── Menu.Context
├── Menu.Empty
├── Menu.Filter
│   └── Menu.FilterInput
├── Menu.Indicator
├── Menu.ItemContext
├── Menu.ItemGroupLabel
├── Menu.ItemGroup
├── Menu.ItemIndicator
├── Menu.ItemText
├── Menu.Item
├── Menu.RadioItemGroup
├── Menu.RadioItem
├── Menu.RootProvider
├── Menu.Separator
├── Menu.TriggerItem
├── Menu.Trigger
    

Examples

Item Selection

Use onSelect to handle item selection. The callback receives the item's id.

Root Provider

An alternative way to control the menu is to use the RootProvider component and the useMenu hook. This way you can access the state and methods from outside the component.

Grouping

Use Menu.ItemGroup and Menu.ItemGroupLabel to organize related menu items.

Links

To render menu items as links, use the asChild prop to replace the default element with an anchor tag.

Checkbox

To add a checkbox to a menu item, use the Menu.CheckboxItem component.

Radio Group

To group radio option items, use the Menu.RadioItemGroup component.

Context Menu

To show the menu when a trigger element is right-clicked, use the Menu.ContextTrigger component.

Context menus are also opened during a long-press of roughly 700ms when the pointer is pen or touch.

Nested

To show a nested menu, render another Menu component and use the Menu.TriggerItem component to open the submenu.

Menu in Dialog

When rendering a menu inside a dialog, use lazyMount and unmountOnExit to ensure proper cleanup when the dialog closes.

Menu Item Dialog

Open a confirmation dialog from a menu item. This pattern is useful for destructive actions like delete that require user confirmation.

Multiple Triggers

Share a single menu across multiple trigger elements. Pass a value to each Menu.Trigger — the menu repositions to whichever trigger is activated.

Filterable

Use Menu.Filter and Menu.FilterInput with useMenuFilterCollection to filter menu items. Set :typeahead="false" on Menu.Root so typing goes to the search field instead of menu typeahead.

Filterable Multiple

Combine a filterable menu with Menu.CheckboxItem and :close-on-select="false" for multi-select.

API

See Ark UI Menu docs for full props and examples.