Context menu

A right-click menu at the cursor.

Right-click anywhere here

import { BuiContextMenu } from 'ng-blatui';

<bui-context-menu [items]="items">
  <div>Right-click here</div>
</bui-context-menu>

With icons

Right-click for an icon menu

<!-- each item takes an optional icon (SVG path d) -->
<bui-context-menu [items]="items" />
// items = [{ label: 'Profile', icon: 'M19 21v-2…' }, …]

Submenu

Right-click → hover “Share”

<!-- nest items with children → a flyout submenu on hover -->
<bui-context-menu [items]="items" />
// items = [{ label: 'Share', children: [{ label: 'Copy link' }, { label: 'Email' }] }]

API reference

Inputs

Prop	Type	Default	Description
`items`	`readonly ContextMenuItem[]`	`[]`	Items shown in the menu, in display order.

Outputs

Event	Payload	Description
`selected`	`ContextMenuItem`	Emits the chosen item when a (non-separator) entry is activated.

Types

ContextMenuItem

Field	Type	Description
`label`?	`string`	Text shown for the menu entry.
`value`?	`string`	Identifying value emitted when the item is selected.
`shortcut`?	`string`	Keyboard shortcut hint shown trailing the label.
`danger`?	`false \| true`	Whether to render the item in the destructive (danger) style.
`separator`?	`false \| true`	Whether this entry is a divider rather than a selectable item.
`icon`?	`string`	Optional leading icon, given as an SVG path `d` string.
`children`?	`ContextMenuItem[]`	Nested items — rendered as a submenu flyout on hover.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.