`-based grid is used in the example above instead of a real `` because `` renders a wrapper element, and wrappers between `` and `` are invalid HTML. If you need a true `

`, attach the right-click handler directly to each `` via Alpine: ``. ::: ## Submenus Nest a `` to add a flyout sub-menu. The parent item opens a child panel beside it (on hover, click, or `ArrowRight`); the child holds ordinary ``s. Selecting a leaf item closes the whole menu. :::preview{title="Context menu with a submenu"}

Right-click anywhere in this card

Rename

Desktop

Documents

Delete

::: Pass a `label` for plain parent text, or a `` for rich content. The parent carries `aria-haspopup="menu"` + `aria-expanded`; the child panel is its own `role="menu"`. Submenus nest arbitrarily deep. ## Behavior - **Right-click** (`contextmenu` event) opens the menu at the cursor position - **[Floating UI](https://floating-ui.com/)** (bundled ~3.5 KB) positions the menu at the click coordinates with flip and shift - **Click outside** closes the menu automatically - **Livewire SPA** navigation (`wire:navigate`) automatically closes open menus - **Transitions** use scale + opacity for smooth open/close animation - The native browser context menu is prevented only inside the trigger area -- right-clicking elsewhere on the page behaves normally ## Props ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `teleport` | `bool` | `true` | Teleport the panel to `` so it escapes every ancestor stacking context, `overflow: hidden`, and `contain: layout` container — the same pattern Modal, Drawer, Alert-Dialog, Tooltip, and Command-Palette use. Set to `false` only when the panel must stay inside the component root (rare; almost always an anti-pattern). | | `scope` | `string\|null` | `null` | Scoped personalization key | ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `href` | `string\|null` | `null` | URL (renders `` instead of `