Context Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a right click.
About
Context Menu is built with the help of Menu from Material CDK and provides a flexible way to offer context-specific actions.
Default
A simple context menu with standard actions and shortcuts.
Right click here
context-menu-example-default.ts
With Icons & Colors
Use icons and colors (like destructive for delete actions) to improve user guidance.
Right click file
context-menu-example-icons.ts
Stateful
Use radio items or checkboxes within the menu to control state directly.
Right click here
Current Status: Unsaved Changes
context-menu-example-state.ts
API Reference
Helm API
The Helm directives provide the spartan/ui styling for the context menu.
| Component / Directive | Selector | Description |
|---|---|---|
| HlmContextMenuTrigger | [hlmContextMenuTrigger] | The trigger that opens the menu on right-click. Inputs: disabled: boolean, hlmContextMenuTriggerData: any |
| HlmDropdownMenu | hlm-dropdown-menu | The main container for the menu. |
| HlmDropdownMenuItem | [hlmDropdownMenuItem] | A single menu item. |
| HlmDropdownMenuSeparator | hlm-dropdown-menu-separator | Separator line between menu groups. |
| HlmDropdownMenuShortcut | hlm-dropdown-menu-shortcut | Display of keyboard shortcuts. |