Menu

The EMenu component anchors contextual content to a trigger and coordinates its placement, open state, dismissal, focus, and layering. Compose it with EList for action menus or provide custom interactive content when the overlay must stay open.

Usage

Use the playground to configure the most common menu decisions. The activator slot forwards the click, keyboard, and ARIA bindings through attrs while v-model exposes the current open state.

bottom left
primary
default

Activator patterns

Prefer the named activator slot to keep the trigger and menu together. Use the activator prop with an element ref when another component owns the trigger; selector strings are available for stable DOM targets.

Placement and offsets

Set the preferred edge with origin, then apply offsetX and offsetY. The menu can flip to the side with more room, while checkOffset keeps the surface within the viewport.

Sizing and surface

By default, the menu accommodates both its activator and content. Use fitContent for intrinsic content width, fullWidth to match the activator, or explicit dimensions when the design requires a fixed surface.

Transitions

Menus use the fade transition by default, so the prop can be omitted. Set transition="scale" when the surface should grow into view from its origin.

Open, close, and disabled states

Control visibility with v-model. Configure selection dismissal with closeOnContentClick, prevent all activator opening with disableMenu, or call the exposed methods for application-driven flows.

Composition patterns

Compose EMenu with EList for compact actions. For filters, pickers, or other multi-step content, keep the overlay open and close it explicitly when the task is complete.

Nested menus and layering

Nested menus form a shared overlay branch. Each child receives the next layer, outside interaction closes unrelated branches, and Escape closes the topmost open menu first.

Accessibility and keyboard

Activator bindings synchronize aria-haspopup, aria-expanded, aria-controls, and disabled state. Enter, Space, or Arrow Down opens the menu; Escape closes the top layer and focus returns to the activator.

Focus the activator and press Enter, Space, or Arrow Down. Press Escape to close.

API reference

Reference the verified public props for EMenu. Events, slots, and exposed methods are summarized after the table.

PropertyTypeDefault
modelValuebooleanfalse

Controlled open state synchronized through update:modelValue.

activatorMenuTypeTargetactivator slot

External activator resolved from an element, CSS selector, or element ref.

closeOnContentClickbooleanfalse

Closes the menu when its content surface receives a click.

disableMenubooleanfalse

Prevents click and keyboard activation while preserving ARIA state.

fitContent / fullWidthbooleanfalse

Uses intrinsic content width or exactly matches the activator width.

width / maxWidthstring | numberundefined

Sets explicit menu width or constrains its maximum width.

originstring"bottom left"

Preferred vertical and horizontal placement relative to the activator.

offsetX / offsetYstring | number0

Moves the menu away from its resolved horizontal or vertical position.

checkOffsetbooleanfalse

Adjusts the resolved position to keep the menu within viewport margins.

holdFocusbooleanfalse

Keeps focus on the current element instead of moving it into the menu or back to the activator.

transitionstring"fade"

Names the Vue transition used when the content opens and closes.

color / elevationstring / Elevationundefined / "sm"

Sets content foreground color and framework surface elevation.

ariaHaspopup / ariaControlsstring"menu" / generated id

Overrides the generated activator relationship attributes.

contentRolestring"menu"

Sets the teleported content role. Use presentation when a child owns semantics.

Events, slots, and methods

EMenu emits update:modelValue. Public slots are activator and default. The component exposes openMenu() and closeMenu().