C&C Docs
Log in

cnc-context-menu

Wraps any trigger area and opens a top-layer menu at the right-click coordinates. The menu is clamped to the viewport, closes on click-away, Escape or selection, and tells you which of those it was.

Quick start

The default slot is the area that answers a right-click; the named content slot is the menu itself. There is no trigger property and no open property to set — the widget binds contextmenu on whatever you put in the default slot.

Quarterly report.pdf

Right-click the title, the description, or the empty card area.

Right-click the card

<cnc-context-menu @close="last = $event.detail.reason">
  <div>Right-click me</div>

  <div slot="content">
    <button role="menuitem">Open</button>
    <button role="menuitem" data-context-menu-close="delete">Delete</button>
  </div>
</cnc-context-menu>

Usage guidance

A context menu is a SECOND way to reach actions, never the only one. Right-click is undiscoverable and unavailable on touch, so every item here should also be reachable from a visible control — a cnc-drop on a row, or a toolbar. Use it to make a frequent action faster for the people who look for it, not to save space.

Give items role="menuitem" even when they are already buttons: it is what the auto-close rule matches on non-button elements, and it is what tells a screen reader the role="menu" surface has the items it promises.

← Back to Widgets