◇

The unstyled, low-level menu engine that powers DropdownMenu, ContextMenu, and Menubar. It is built on Popper and wires up roving-focus keyboard navigation, typeahead, nested submenus, checkbox/radio items, and modal vs. non-modal dismissal — but it is deliberately trigger-agnostic, so consumers supply their own anchor and open logic. Use this directly only when composing a new menu-like primitive; for ordinary app menus reach for DropdownMenu or ContextMenu instead. MenuRoot owns open state and provides context to every part; bind v-model:open (or listen to update:open) to control or observe whether the menu is open.

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  MenuAnchor,
  MenuArrow,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuItem,
  MenuItemIndicator,
  MenuLabel,
  MenuPortal,
  MenuRadioGroup,
  MenuRadioItem,
  MenuRoot,
  MenuSeparator,
  MenuSub,
  MenuSubContent,
  MenuSubTrigger,
} from '@robonen/primitives/menus/menu';

<MenuRoot>
  <MenuAnchor />
  <MenuArrow />
  <MenuCheckboxItem />
  <MenuContent />
  <MenuGroup />
  <MenuItem />
  <MenuItemIndicator />
  <MenuLabel />
  <MenuPortal />
  <MenuRadioGroup />
  <MenuRadioItem />
  <MenuSeparator />
  <MenuSub />
  <MenuSubContent />
  <MenuSubTrigger />
</MenuRoot>

API Reference

MenuAnchor

Anchor

An optional positioning anchor for the menu content. Render it around the element the menu should attach to when the open trigger is not itself the anchor (for example, anchoring a dropdown to a virtual element or the pointer). When omitted, content is positioned relative to its trigger.

No props or events — renders its element and forwards attributes.

MenuArrow

Arrow

An optional arrow that renders inside the menu content and points back toward the anchor, visually tying the floating menu to its trigger. Place it as a child of the content.

No props or events — renders its element and forwards attributes.

MenuCheckboxItem

CheckboxItem

A menu item that toggles a boolean (or indeterminate) state when selected, rendering with `role="menuitemcheckbox"`. Pair it with MenuItemIndicator to show a check mark. Bind `v-model:checked` to control its state, or leave it uncontrolled with `defaultChecked`.

Prop	Type	Default	Description
`checked`?	`CheckedState`	—	The controlled checked state. Use together with `update:checked`; may be `'indeterminate'`.
`defaultChecked`?	`CheckedState`	—	The checked state when uncontrolled.

MenuContent

Content

The popup surface that holds the menu items. It mounts only while the menu is open (gated by Presence), positions itself via Popper, and switches between modal and non-modal behaviour based on the root's `modal` prop. Place items, groups, labels, separators, and submenus inside it. Set `forceMount` to keep it in the DOM when open state is driven externally (for example, to run exit animations).

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Force mounting the content even when closed, e.g. to control presence with an external animation library.

MenuGroup

Group

Groups a set of related menu items under `role="group"` for accessibility. Combine it with a MenuLabel to give the group an accessible name.

No props or events — renders its element and forwards attributes.

MenuItem

Item

A single actionable menu item that emits `select` and closes the menu when activated by click, Enter, or Space. Use it for ordinary commands; call `event.preventDefault()` in `select` to keep the menu open after selection.

No props or events — renders its element and forwards attributes.

MenuItemIndicator

ItemIndicator

Renders only while its parent MenuCheckboxItem or MenuRadioItem is checked (or indeterminate), giving you a place to show a check or dot icon. Must be nested inside a checkbox or radio item, which provides its state via context.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Force mounting the indicator even when unchecked, e.g. to control presence with an external animation library.

MenuLabel

Label

A non-interactive heading for a section of the menu. It is skipped by keyboard navigation and typeahead, so use it to title a group of items rather than as a selectable entry.

No props or events — renders its element and forwards attributes.

MenuPortal

Portal

Teleports the menu content into a different part of the DOM (the document body by default) so it escapes ancestor `overflow` and stacking-context clipping. Wrap the content in this part to render it as a top-level overlay.

No props or events — renders its element and forwards attributes.

MenuRadioGroup

RadioGroup

Wraps a set of MenuRadioItems so that only one can be selected at a time, managing the shared selected value. Bind `v-model` to control the selection, or supply `defaultValue` to leave it uncontrolled. Values may be any serialisable type (string / number / boolean / object), not just strings. Renders through MenuGroup so a nested MenuLabel labels the group.

Prop	Type	Default	Description
`modelValue`?	`AcceptableValue`	—	The controlled selected value. Use together with `update:modelValue`.
`defaultValue`?	`AcceptableValue`	—	The selected value when uncontrolled.

MenuRadioItem

RadioItem

A mutually-exclusive menu item rendered with `role="menuitemradio"`. Selecting it sets the enclosing MenuRadioGroup's value to this item's `value`. Pair it with MenuItemIndicator to show which option is active. `value` may be any serialisable type, compared structurally to the group's selected value. Must be used inside a MenuRadioGroup.

Prop	Type	Default	Description
`value`	`AcceptableValue`	—	The unique value this item represents within its MenuRadioGroup.

MenuRoot

Root

The unstyled, low-level menu engine that powers DropdownMenu, ContextMenu, and Menubar. It is built on Popper and wires up roving-focus keyboard navigation, typeahead, nested submenus, checkbox/radio items, and modal vs. non-modal dismissal — but it is deliberately trigger-agnostic, so consumers supply their own anchor and open logic. Use this directly only when composing a new menu-like primitive; for ordinary app menus reach for DropdownMenu or ContextMenu instead. MenuRoot owns open state and provides context to every part; bind `v-model:open` (or listen to `update:open`) to control or observe whether the menu is open.

Prop	Type	Default	Description
`dir`?	`Direction`	—	—
`modal`?	`boolean`	—	—
`open`?	`boolean`	—	Two-way bound value (`v-model:open`).

Emits

Event	Payload
`update:open`	`[value: boolean]`

MenuSeparator

Separator

A visual and semantic divider (`role="separator"`) between groups of menu items. It is purely decorative for navigation and is skipped by keyboard focus.

No props or events — renders its element and forwards attributes.

MenuSub

Sub

Establishes a nested submenu. It provides a fresh menu context plus a sub context shared by its MenuSubTrigger and MenuSubContent, owning the submenu's open state. Bind `v-model:open` to control it, or leave it unbound to let the submenu manage its own open state (uncontrolled); the default slot also exposes the current `open` value.

Prop	Type	Default	Description
`open`?	`boolean`	—	The controlled open state of the submenu. Use together with `update:open`.

Emits

Event	Payload
`update:open`	`[value: boolean]`

MenuSubContent

SubContent

The popup surface for a submenu's items. It mounts while the submenu is open, positions itself to the side of its MenuSubTrigger (flipping for RTL), and always renders non-modally so the parent menu stays interactive. Must be used inside a MenuSub.

Prop	Type	Default	Description
`forceMount`?	`boolean`	—	Force mounting the content even when closed, e.g. to control presence with an external animation library.

MenuSubTrigger

SubTrigger

A menu item that opens its parent MenuSub's submenu. It acts as both the positioning anchor and the trigger, opening on hover (with a grace delay) or via the directional arrow key and closing on the opposite arrow. Must be used inside a MenuSub, alongside a MenuSubContent.

No props or events — renders its element and forwards attributes.