Context menu
@xui/context-menuOpens the same @xui/menu panel where the user right-clicks. Built on CdkContextMenuTrigger, so it shares the menu's keyboard model, submenu aim and dismissal — only the way it opens differs. Right-click is not something jsdom exercises, so this story is the real check.
Install
pnpm add @xui/context-menu Add the barrel to a standalone component's imports:
import { XuiContextMenuImports } from '@xui/context-menu';
@Component({
imports: [XuiContextMenuImports],
// …
})Examples
Default
Loading preview…
<div
[xuiContextMenuTriggerFor]="menu"
class="border-border text-foreground-muted grid h-48 w-96 place-items-center rounded-lg border border-dashed text-sm select-none"
>
Right-click anywhere in here
</div>
<ng-template #menu>
<xui-menu>
<button xuiMenuItem icon="matContentCutRound">Cut<span menuItemLabel>⌘X</span></button>
<button xuiMenuItem icon="matContentCopyRound">Copy<span menuItemLabel>⌘C</span></button>
<button xuiMenuItem icon="matContentPasteRound">Paste<span menuItemLabel>⌘V</span></button>
<xui-menu-divider />
<button xuiMenuItem [xuiMenuTriggerFor]="more">More</button>
</xui-menu>
</ng-template>
<ng-template #more>
<xui-menu>
<button xuiMenuItem>Select all</button>
<button xuiMenuItem color="error">Delete</button>
</xui-menu>
</ng-template>API
Opens a menu where the user right-clicks (or long-presses) on the host.