A floating panel positioned at explicit x/y coordinates, with an invisible backdrop that dismisses it on outside click. Useful for context menus at a pointer position.
Examples
Anchored menu
x/y are measured from the nearest positioned ancestor, so a relative wrapper anchors the panel to a trigger. Here y = 40 drops it just below the button; click outside to dismiss.
<div class="relative inline-block">
<UiButton variant="outline" @click="state.open = !state.open">
Actions <UiIcon name="mdi:menu-down" class="w-4 h-4" />
</UiButton>
<UiPopup :show="state.open" :x="0" :y="40" @close="state.open = false">
<UiDropdownItem icon="mdi:content-copy" label="Copy" />
<UiDropdownItem icon="mdi:share-variant" label="Share" />
<UiDropdownItem icon="mdi:trash-can-outline" label="Delete" color="red" />
</UiPopup>
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| show | boolean | false | Whether the popup is visible. |
| x | number | 0 | Left coordinate in pixels. |
| y | number | 0 | Top coordinate in pixels. |
| offsetY | number | 0 | Extra vertical offset. |
| width | string | 'w-56' | Panel width class. |
| panelZ | string | 'z-50' | Panel stacking class. |
| backdropZ | string | 'z-40' | Backdrop stacking class. |
Events
| Event | Payload | Description |
|---|---|---|
close | void | Emitted when the backdrop is clicked. |
Slots
| Slot | Description |
|---|---|
default | Popup content. |