Context Menu — ARC UI

Components

Context Menu

feedback

interactive

<arc-context-menu>

Overview

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

Attach a ContextMenu to the entire document body -- scope it to a specific interactive region
Put complex UI (forms, multi-select lists) inside context menu items
Forget to handle the arc-select event -- without it, selecting an item has no effect
Mix ContextMenu with DropdownMenu on the same element; they serve different interaction models
Remove the default Escape-to-close behavior, as it is critical for keyboard accessibility

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 for intuitive dismissal

Preview

Right-click anywhere in this box

Cut

Copy

Paste

Select All

Delete

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';

<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: `
    <ContextMenu>
      <div slot="trigger">Right-click me</div>
      <MenuItem shortcut="⌘C">Copy</MenuItem>
      <MenuItem shortcut="⌘V">Paste</MenuItem>
    </ContextMenu>
  `,
})
export class MyComponent {}

import { ContextMenu, MenuItem } from '@arclux/arc-ui-solid';

<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';

<ContextMenu>
  <div slot="trigger">Right-click me</div>
  <MenuItem shortcut="⌘C">Copy</MenuItem>
  <MenuItem shortcut="⌘V">Paste</MenuItem>
</ContextMenu>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	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

Event	Description
`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

MenuItem

<arc-menu-item>

A single action entry inside the context menu.

Prop	Type	Default	Description
`label`	`string`	—	Display text for the menu item.
`shortcut`	`string`	—	Keyboard shortcut hint displayed on the right side.
`icon`	`string`	—	Name of the icon to display before the label.
`disabled`	`boolean`	`false`	Disables the item, preventing interaction.

MenuDivider

<arc-menu-divider>

A visual separator between groups of menu items.