Theme:
Ui3nMenu
Context menu component with customizable positioning and behavior.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
width | string | number | undefined | "max-content" | Root element width |
modelValue | boolean | undefined | — | Menu open state |
triggerElement | HTMLElement | Ui3nVirtualElement | undefined | — | Trigger element |
positionStrategy | "absolute" | "fixed" | undefined | "absolute" | Position strategy |
positionAutoupdate | boolean | undefined | — | Whether to update position automatically |
allowFlip | boolean | undefined | true | Whether to allow flipping |
lockScroll | boolean | undefined | false | Whether to lock scroll when menu is open |
offsetX | number | undefined | 0 | Offset X |
offsetY | number | undefined | 0 | Offset Y |
contentBorderRadius | number | number[] | undefined | 4 | Content border radius |
contentStyles | Record<string, string> | undefined | — | Content styles |
zIndex | number | undefined | 1000 | Z-index |
closeOnClick | boolean | undefined | true | Whether to close on click |
closeOnClickOutside | boolean | undefined | true | Whether to close on click outside |
disabled | boolean | undefined | false | Whether menu is disabled |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
update:modelValue | value: boolean | — |
click | value: Event | — |
close | | — |
open | | — |
opened | | — |
closed | | — |
click-outside | | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#default | — | Default slot |
#menu | — | Menu slot |
Public Methods & Exposes
| Method Name | Signature / Type | Description |
|---|---|---|
isPositioned() | boolean | Whether menu is positioned |
update() | () => void | Update position |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-menu-content-bg | var(--color-bg-control-secondary-default) |
--ui3n-menu-content-border-radius | 4px |
--ui3n-menu-z-index | 1000 |
Usage Examples
Simple menu
Simple menu
Basic menu with default trigger
Menu with custom offset
Menu with custom offset
Menu with custom X and Y offsets
Controlled menu
Controlled menu
Menu with v-model for open state control
External state 'isOpen': false
Context menu by coordinates
Context menu by coordinates
Opening menu at mouse pointer coordinates using a virtual trigger element on right click
Right-click anywhere inside this dashed area to trigger the Context Menu