Context Menu overview

Headless context menu adds right-click and keyboard context invocation on top of tngMenu while leaving the trigger surface, panel placement, and styling in your hands.

import {
  TngContextMenu,
  TngContextMenuTrigger,
  TngMenu,
  TngMenuGroupLabel,
  TngMenuItem,
  TngMenuSeparator,
} from '@tailng-ui/primitives';

Basic composition

Apply tngContextMenuTrigger to any focusable target, then add tngContextMenu on the menu host that already owns tngMenu. The exported instance exposes whether the menu opened from a pointer or keyboard anchor.

<div class="context-shell">
  <div tabindex="0" [tngContextMenuTrigger]="assetMenu">Right-click target</div>
  <div tngMenu tngContextMenu #assetMenu="tngContextMenu" aria-label="Asset actions">
    <button type="button" tngMenuItem tngMenuItemValue="rename">Rename</button>
    <button type="button" tngMenuItem tngMenuItemValue="archive">Archive</button>
  </div>
</div>
<!-- Read assetMenu.getAnchorType() / getPointerAnchor() when you want cursor placement. -->

Keyboard baseline

• Shift + F10 or ContextMenu opens from the focused target.
• ArrowDown/ArrowUp traverses enabled actions.
• Enter/Space activates the highlighted action.
• Escape closes the menu and restores focus to the trigger target.