Context Menu overview
Context Menu layers right-click and keyboard context actions on top of menu primitives while keeping the trigger surface fully owner-controlled and exposing anchor state for owner-managed placement.
Imports
Use primitives for headless control, or the wrapper for default panel styling.
Primitive imports
ts
import {
TngContextMenu,
TngContextMenuTrigger,
TngMenu,
TngMenuItem,
} from '@tailng-ui/primitives';Wrapper imports
ts
import { TngContextMenuComponent } from '@tailng-ui/components';
import { TngContextMenuTrigger, TngMenuItem } from '@tailng-ui/primitives';Usage patterns
The exported tngContextMenu instance tracks whether the menu opened from a pointer or keyboard anchor. Use that state when you want true cursor-relative placement in headless builds; the wrapper only adds the minimum panel skin.
Headless usage
html
<div class="context-menu-shell context-menu-shell--anchored">
<div tabindex="0" [tngContextMenuTrigger]="assetMenu">Right-click target</div>
<div tngMenu tngContextMenu #assetMenu="tngContextMenu">
<button type="button" tngMenuItem tngMenuItemValue="Rename">Rename</button>
<button type="button" tngMenuItem tngMenuItemValue="Archive">Archive</button>
</div>
</div>
<!-- Use assetMenu.getAnchorType() / getPointerAnchor() if you want cursor-relative placement. -->Wrapper usage
html
<div class="context-menu-shell context-menu-shell--anchored">
<div tabindex="0" [tngContextMenuTrigger]="assetMenu">Right-click target</div>
<tng-context-menu #assetMenu="tngContextMenu" ariaLabel="Asset actions">
<button type="button" tngMenuItem tngMenuItemValue="Rename">Rename</button>
<button type="button" tngMenuItem tngMenuItemValue="Archive">Archive</button>
</tng-context-menu>
</div>Style variants
Same context-menu behavior rendered through plain CSS wrappers and Tailwind utility shells. These docs anchor the menu under each target for readability.
Wrapper actions (plain CSS)
Right-click this release item for wrapper actions.
Release
last command: No command yet
Wrapper actions (Tailwind shell)
Right-click this card for Tailwind shell actions.
last command: No command yet
Keyboard baseline
Shift + F10orContextMenuopens from focused target.ArrowDown/ArrowUptraverses enabled actions.Enter/Spaceactivates the highlighted action.Escapecloses the menu and restores focus to the trigger target.