• Overview
• Basic Usage
• Props
• Slots
• Variants / Examples
  • File Manager Actions
  • Table Row Context Menu
• Events
• Accessibility

Overview#

The <x-aura::context-menu> component renders a custom right-click menu on any element. When the user right-clicks within the component's area, a floating menu appears at the cursor position. The menu is viewport-aware, flipping its position when it would overflow the screen edges. It closes on outside click or Escape key.

Use context menu for:

• File manager actions (copy, paste, rename)
• Table row actions
• Canvas or editor context operations
• Custom right-click menus replacing the browser default

Basic Usage#

<x-aura::context-menu>
    <div class="p-8 border border-dashed rounded-lg text-center text-sm text-gray-500">
        Right-click anywhere in this area
    </div>

    <x-slot:menu>
        <x-aura::dropdown.item icon="copy">Copy</x-aura::dropdown.item>
        <x-aura::dropdown.item icon="clipboard">Paste</x-aura::dropdown.item>
        <x-aura::dropdown.separator />
        <x-aura::dropdown.item icon="trash" variant="danger">Delete</x-aura::dropdown.item>
    </x-slot:menu>
</x-aura::context-menu>

Props#

Slots#

Variants / Examples#

File Manager Actions#

<x-aura::context-menu width="220px">
    <div class="p-6 bg-gray-50 rounded-lg">
        <p class="text-sm">project-files/</p>
    </div>

    <x-slot:menu>
        <x-aura::dropdown.item icon="file-text">New File</x-aura::dropdown.item>
        <x-aura::dropdown.item icon="folder">New Folder</x-aura::dropdown.item>
        <x-aura::dropdown.separator />
        <x-aura::dropdown.item icon="upload">Upload</x-aura::dropdown.item>
        <x-aura::dropdown.item icon="download">Download</x-aura::dropdown.item>
        <x-aura::dropdown.separator />
        <x-aura::dropdown.item icon="trash" variant="danger">Delete</x-aura::dropdown.item>
    </x-slot:menu>
</x-aura::context-menu>

Table Row Context Menu#

<x-aura::context-menu>
    <tr class="hover:bg-gray-50">
        <td>John Doe</td>
        <td>[email protected]</td>
    </tr>

    <x-slot:menu>
        <x-aura::dropdown.item icon="eye">View</x-aura::dropdown.item>
        <x-aura::dropdown.item icon="pencil">Edit</x-aura::dropdown.item>
        <x-aura::dropdown.separator />
        <x-aura::dropdown.item icon="trash" variant="danger">Delete</x-aura::dropdown.item>
    </x-slot:menu>
</x-aura::context-menu>

Events#

The context menu uses Alpine.js internally:

• Open: Right-click (@contextmenu.prevent) on the trigger area
• Close: Click outside (@click.outside) or press Escape (@keydown.escape.window)

Accessibility#

• The menu panel includes role="menu" for proper semantic identification.
• The menu is dismissed with the Escape key via @keydown.escape.window.
• Outside clicks close the menu via @click.outside.
• The native right-click event is intercepted with @contextmenu.prevent, replacing the browser default.
• Menu items can reuse <x-aura::dropdown.item> components, which render as focusable <a> or <button> elements.