A floating menu that opens at the cursor position on right-click. Supports icons, keyboard shortcuts, danger variants, disabled items, and multiple independent instances on the same page.
Wrap any element with x-ui::context and put your items in the menu slot. Right-click the area below.
<x-ui::context>
<div class="rounded-xl border-2 border-dashed border-zinc-200 dark:border-zinc-700 p-12 text-center">
Right-click anywhere in this area
</div>
<x-slot:menu>
<x-ui::context-item icon="eye">View</x-ui::context-item>
<x-ui::context-item icon="pencil-square">Edit</x-ui::context-item>
<x-ui::context-item icon="document-duplicate">Duplicate</x-ui::context-item>
<x-ui::context-separator />
<x-ui::context-item icon="trash" variant="danger">Delete</x-ui::context-item>
</x-slot:menu>
</x-ui::context>
Items support variant="danger" for destructive actions, disabled to prevent interaction, and href to render as a link.
{{-- Default item --}}
<x-ui::context-item icon="pencil-square">Edit</x-ui::context-item>
{{-- Danger item --}}
<x-ui::context-item icon="trash" variant="danger">Delete</x-ui::context-item>
{{-- Disabled item --}}
<x-ui::context-item icon="lock-closed" disabled>Locked</x-ui::context-item>
{{-- Link item --}}
<x-ui::context-item icon="arrow-top-right-on-square" href="/dashboard">Open in new tab</x-ui::context-item>
Pass a shortcut string to display a keyboard hint aligned to the right of the label.
<x-ui::context-item icon="eye" shortcut="⌘O">Open</x-ui::context-item>
<x-ui::context-item icon="pencil-square" shortcut="⌘E">Edit</x-ui::context-item>
<x-ui::context-item icon="document-duplicate" shortcut="⌘D">Duplicate</x-ui::context-item>
<x-ui::context-separator />
<x-ui::context-item icon="trash" variant="danger" shortcut="⌫">Delete</x-ui::context-item>
Add wire:click directly on any context-item to call a Livewire action. The menu closes automatically after the item is clicked.
// Livewire component
public ?string $lastAction = null;
public function action(string $label): void
{
$this->lastAction = $label;
}
// Template
<x-ui::context>
<div class="...">Right-click me</div>
<x-slot:menu>
<x-ui::context-item icon="eye" wire:click="action('View')">View</x-ui::context-item>
<x-ui::context-item icon="pencil-square" wire:click="action('Edit')">Edit</x-ui::context-item>
<x-ui::context-separator />
<x-ui::context-item icon="trash" variant="danger" wire:click="action('Delete')">Delete</x-ui::context-item>
</x-slot:menu>
</x-ui::context>
Control the menu panel width with the width prop. Defaults to md. Use a wider value when items have long labels or shortcuts.
<x-ui::context width="sm">...</x-ui::context> {{-- w-48 --}}
<x-ui::context width="md">...</x-ui::context> {{-- w-56 (default) --}}
<x-ui::context width="lg">...</x-ui::context> {{-- w-64 --}}
<x-ui::context width="xl">...</x-ui::context> {{-- w-72 --}}