Components / Context Menu

Context Menu

A right-click action menu positioned at the pointer.

Right click this project card

example.component.html

html

<aevko-context-menu label="Canvas actions">
  <div aevkoContextMenuTrigger>
    Right click this area
  </div>
  <button aevkoContextMenuItem>
    Duplicate
  </button>
  <button aevkoContextMenuItem>
    Delete
  </button>
</aevko-context-menu>

Installation

npx aevko-ui@latest add context-menu --yes

Source ownership

Customization

Attach the trigger to the exact region it affects and project only actions that are also discoverable through ordinary interface controls.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible menu name.
`open`	`model<boolean>`	`false`	Observable context-menu state.
`trigger / item`	`projected directives`	`required`	Right-click region and native actions.

Accessibility contract

Accessibility

Included behavior

Right click opens a labelled menu; Arrow keys, Home, End and Escape move or dismiss focus.

Your responsibility

Provide every context action elsewhere in the interface because right click is not universally available or discoverable.

Back to all components