Context Menu

Right-click context menu with keyboard shortcuts.

Components

Context Menu

feedback

interactive

<arc-context-menu>

Overview

ContextMenu replaces the browser's native right-click menu with a custom, styled menu that matches your application's design system. It automatically 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 subtle scale-in animation and positions itself intelligently, flipping 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 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
Full 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';

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

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

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.

label string: Display text for the menu item.
selectionValue: What arc-select reports. Falls back to the label so an item that never sets `value` behaves as it always did.
shortcut string ='': Keyboard shortcut hint displayed on the right side.
disabled boolean =false: Disables the item, preventing interaction.
icon string ='': Name of the icon to display before the label.
value string ='': Stable identifier carried on the arc-select detail. Defaults to the label, which is fine until two items share one — give anything a handler must act on its own value rather than matching against display text.

MenuDivider

<arc-menu-divider>

A visual separator between groups of menu items.

Context Menu

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

MenuItem

MenuDivider

See Also

Docs

Project

Arclight