API reference
Headless context menu is a thin trigger layer on top of tngMenu. The context directive captures whether an open came from pointer coordinates or a keyboard anchor and lets owners use that state for their own placement logic.
tngContextMenu
Apply tngContextMenu on the same host as tngMenu. The directive exports as tngContextMenu and delegates open and close behavior to the linked menu instance.
Context trigger + menu composition
html
<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>
</div>
</div>
| Capability | Details |
|---|---|
exportAs | tngContextMenu |
| Host requirement | Must share the same host injector as tngMenu. |
| Open state | isOpen() and close(restoreFocus) proxy the hosted menu. |
| Anchor state | Tracks 'pointer' vs 'element' opens and stores the last pointer coordinates from a right-click invocation. |
tngContextMenuTrigger
Link any focusable target to a context menu instance with [tngContextMenuTrigger]. The directive listens for contextmenu, Shift + F10, and the ContextMenu keyboard key.
| Input / Host | Type | Details |
|---|---|---|
[tngContextMenuTrigger] | TngContextMenu | null | Required reference to the exported context menu instance. |
data-slot | 'context-menu-trigger' | Stable styling hook for right-click affordances and focus treatment. |
| Host attributes | id, aria-haspopup, aria-controls, aria-expanded | Reflects the relationship to the linked menu surface and current open state. |
| Disabled hosts | native / ARIA | Honors disabled, disabled attribute, or aria-disabled="true". |
Exported instance
| Method | Type | Description |
|---|---|---|
isOpen() | boolean | Current open state for the linked context menu. |
close(restoreFocus) | (restoreFocus: boolean) => void | Closes the panel and optionally restores focus to the trigger target. |
getAnchorType() | 'pointer' | 'element' | null | Whether the current open came from right-click coordinates or keyboard context invocation. |
getPointerAnchor() | TngContextMenuPointerAnchor | null | Viewport client coordinates captured during a pointer open. Returns null for keyboard opens. |
Keyboard contract
Context-menu keyboard baseline
text
Target
Shift + F10 / ContextMenu : open from the focused target
Escape : close if open
Open menu
ArrowDown / ArrowUp : move active item
Home / End : jump to first / last enabled item
Enter / Space : activate current item
Escape : close and restore focus to the target