Context Menu
Right-click context menu with keyboard shortcuts.
<arc-context-menu>Overview
ContextMenu replaces the browser's native right-click menu with a styled menu that matches your application's design system. It attaches a contextmenu event listener to its parent element, so any right-click within that parent opens the custom menu at the cursor position. The menu supports icons, labels, keyboard shortcut hints, disabled items, and visual dividers via <arc-menu-item> and <arc-menu-divider> children.
The menu appears with a scale-in animation and flips away from viewport edges so it never renders off-screen. When an item is clicked or activated via keyboard, the component dispatches an arc-select event with the item's label, shortcut, and icon metadata, then closes itself. Clicking the transparent backdrop or pressing Escape also dismisses the menu.
Keyboard navigation follows the standard menu pattern: ArrowDown and ArrowUp move focus through selectable items (skipping dividers and disabled entries), Home and End jump to the first and last items, Enter or Space activate the focused item, and Escape closes the menu. The prefers-reduced-motion media query disables the entrance animation for users who request it.
Guidelines
When to use
- Place ContextMenu as a direct child of the element that should trigger the right-click menu
- Group related items with <arc-menu-divider> to improve scannability (e.g. clipboard actions, then navigation actions)
- Include keyboard shortcut hints on items that have global keybindings for consistency
- Disable items that are contextually unavailable rather than removing them, so users learn the full action set
- Keep the menu under 10 items; use submenus or a CommandPalette for larger action sets
When not to use
- Do not attach a ContextMenu to the entire document body. Scope it to a specific interactive region
- Do not put complex UI (forms, multi-select lists) inside context menu items
- Do not forget to handle the arc-select event; without it, selecting an item has no effect
- Do not mix ContextMenu with DropdownMenu on the same element; they serve different interaction models
- Do not remove the default Escape-to-close behavior, as keyboard users depend on it
Features
- Automatically intercepts contextmenu events on the parent element
- Viewport-aware positioning that flips to avoid off-screen rendering
- Scale-in entrance animation with `prefers-reduced-motion` support
- Keyboard navigation: ArrowUp/Down, Home/End, Enter/Space to select, Escape to close
- Support for icons, labels, shortcut hints, and disabled state on each menu item
- Visual dividers via `<arc-menu-divider>` to group related actions
- `arc-select` event with item metadata (label, shortcut, icon) on activation
- Transparent backdrop click-to-close
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<arc-context-menu>
<div slot="trigger">Right-click me</div>
<arc-menu-item shortcut="⌘C">Copy</arc-menu-item>
<arc-menu-item shortcut="⌘V">Paste</arc-menu-item>
</arc-context-menu>import { ContextMenu, MenuItem } from '@arclux/arc-ui-react';
export default function Example() {
return (
<ContextMenu>
<div slot="trigger">Right-click me</div>
<MenuItem shortcut="⌘C">Copy</MenuItem>
<MenuItem shortcut="⌘V">Paste</MenuItem>
</ContextMenu>
);
}<script setup>
import { ContextMenu, MenuItem } from '@arclux/arc-ui-vue';
</script>
<template>
<ContextMenu>
<div slot="trigger">Right-click me</div>
<MenuItem shortcut="⌘C">Copy</MenuItem>
<MenuItem shortcut="⌘V">Paste</MenuItem>
</ContextMenu>
</template><script>
import { ContextMenu, MenuItem } from '@arclux/arc-ui-svelte';
</script>
<ContextMenu>
<div slot="trigger">Right-click me</div>
<MenuItem shortcut="⌘C">Copy</MenuItem>
<MenuItem shortcut="⌘V">Paste</MenuItem>
</ContextMenu>import { Component } from '@angular/core';
import { ContextMenu, MenuItem } from '@arclux/arc-ui-angular';
@Component({
imports: [ContextMenu, MenuItem],
template: `
<arc-context-menu>
<div slot="trigger">Right-click me</div>
<arc-menu-item shortcut="⌘C">Copy</arc-menu-item>
<arc-menu-item shortcut="⌘V">Paste</arc-menu-item>
</arc-context-menu>
`,
})
export class MyComponent {}import { ContextMenu, MenuItem } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<ContextMenu>
<div slot="trigger">Right-click me</div>
<MenuItem shortcut="⌘C">Copy</MenuItem>
<MenuItem shortcut="⌘V">Paste</MenuItem>
</ContextMenu>
);
}import { ContextMenu, MenuItem } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<ContextMenu>
<div slot="trigger">Right-click me</div>
<MenuItem shortcut="⌘C">Copy</MenuItem>
<MenuItem shortcut="⌘V">Paste</MenuItem>
</ContextMenu>
);
}API
openbooleanfalse- Controls the visibility of the context menu. Set to true when the contextmenu event fires; set to false when the user selects an item, clicks the backdrop, or presses Escape.
Events
arc-open- Fired when the context menu opens
arc-close- Fired when the context menu closes
arc-select- Fired when a menu item is selected