Context Menu
Dropdown menus that open when right-clicking a designated area
Basic Usage
Wrap any element with
neura::context-menu to enable the custom right-click menu. Define the menu items in the content slot.
<neura::context-menu>
<div class="h-32 w-64 bg-white border rounded flex items-center justify-center">
Right click here
</div>
<x-slot:content>
<neura::context-menu.item label="Back" shortcut="Alt+Left" icon="arrow-left" />
<neura::context-menu.item label="Forward" shortcut="Alt+Right" icon="arrow-right" disabled />
<neura::context-menu.item label="Reload" shortcut="Ctrl+R" icon="arrow-path" />
<neura::context-menu.separator />
<neura::context-menu.item label="Save as..." shortcut="Ctrl+S" icon="arrow-down-tray" />
</x-slot:content>
</neura::context-menu>Menu Items with Icons
Add icons to menu items to make them more visually recognizable:
<neura::context-menu>
<div>File Options</div>
<x-slot:content>
<neura::context-menu.item label="New File" icon="document-plus" />
<neura::context-menu.item label="Open File" icon="folder-open" />
<neura::context-menu.item label="Save" icon="check-circle" />
<neura::context-menu.separator />
<neura::context-menu.item label="Export" icon="arrow-up-tray" />
</x-slot:content>
</neura::context-menu>Item Variants
Use different variants to indicate destructive actions or primary actions:
<neura::context-menu>
<div>User Card</div>
<x-slot:content>
<neura::context-menu.group label="User Actions" />
<neura::context-menu.item label="View Profile" icon="user" />
<neura::context-menu.item label="Edit User" icon="pencil-square" variant="primary" />
<neura::context-menu.separator />
<neura::context-menu.item
label="Delete User"
icon="trash"
variant="danger"
/>
</x-slot:content>
</neura::context-menu>Disabled Items
Disable menu items when certain actions are not available:
<neura::context-menu>
<div>Document Actions</div>
<x-slot:content>
<neura::context-menu.item
label="Undo"
shortcut="Ctrl+Z"
icon="arrow-uturn-left"
disabled
/>
<neura::context-menu.item
label="Redo"
shortcut="Ctrl+Y"
icon="arrow-uturn-right"
disabled
/>
</x-slot:content>
</neura::context-menu>Keyboard Shortcuts
Display keyboard shortcuts next to menu items to help users learn shortcuts:
<neura::context-menu.item
label="Find"
shortcut="Ctrl+F"
icon="magnifying-glass"
/>
<neura::context-menu.item
label="Format Document"
shortcut="Shift+Alt+F"
icon="sparkles"
/>Menu Groups
Organize menu items into groups with labels:
<neura::context-menu>
<div>Project Options</div>
<x-slot:content>
<neura::context-menu.group label="File" />
<neura::context-menu.item label="New" icon="document-plus" />
<neura::context-menu.item label="Open" icon="folder-open" />
<neura::context-menu.separator />
<neura::context-menu.group label="Edit" />
<neura::context-menu.item label="Cut" icon="scissors" />
</x-slot:content>
</neura::context-menu>Smart Positioning
The context menu automatically adjusts its position to stay within the viewport. Try right-clicking near the edges of the preview area below.
Context Menu Actions
Context menu items can perform different actions: navigate to URLs, execute JavaScript, or call Livewire methods:
Navigation (href)
<neura::context-menu.item
label="View Profile"
icon="user"
href="/profile"
/>
<neura::context-menu.item
label="Settings"
icon="cog-6-tooth"
href="/settings"
/>JavaScript Actions
<neura::context-menu.item
label="Copy to Clipboard"
icon="clipboard"
x-on:click="navigator.clipboard.writeText('Hello')"
/>
<neura::context-menu.item
label="Show Alert"
icon="bell"
x-on:click="alert('Hello!')"
/>Livewire Actions
<neura::context-menu.item
label="Delete Item"
icon="trash"
variant="danger"
wire:click="delete(123)"
/>
<neura::context-menu.item
label="Save Changes"
icon="check-circle"
wire:click="save"
/>Disabling Context Menu
Disable the context menu on specific elements by setting the
disabled prop:
Right-click disabled
<neura::context-menu>
<div>Right-click enabled</div>
<x-slot:content>...</x-slot:content>
</neura::context-menu>
<neura::context-menu disabled>
<div>Right-click disabled</div>
<x-slot:content>...</x-slot:content>
</neura::context-menu>Properties
| Property | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | Disable the context menu on the wrapped element |
Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | - | Display text for the menu item (required) |
| icon | string | null | Icon name to display before the label |
| shortcut | string | null | Keyboard shortcut to display (e.g., 'Ctrl+S') |
| variant | string | 'default' | Visual variant: 'default', 'primary', or 'danger' |
| disabled | boolean | false | Disable the menu item |
Best Practices
✓ Do
- Use context menus for contextual actions related to specific elements
- Group related actions together with separators
- Use icons to make actions more recognizable
- Disable items when actions are not available
- Use the danger variant for destructive actions
- Keep menu items concise and action-oriented
✗ Don't
- Don't use context menus for primary navigation
- Don't create menus with too many items (keep under 10)
- Don't use context menus on elements that already have click handlers
- Don't forget to disable items when actions aren't available
- Don't use vague or ambiguous labels
- Don't override the browser's default context menu unnecessarily
Notes
Positioning
The context menu uses smart positioning to ensure it stays within the viewport. It automatically adjusts when near screen edges.
Closing
The menu closes automatically when clicking outside, pressing Escape, scrolling, or resizing the window.
Teleport
The menu is teleported to the body element to avoid overflow issues with parent containers.
Accessibility
The context menu supports keyboard navigation. Press Escape to close the menu.