Skip to main content

glint-context-menu

Action menu that appears when right-clicking the target element.

<div id="page">
  <div [glintContextMenu]="menu">Right-click here</div>
  <glint-context-menu #menu>
    <glint-button *glintContextMenuOption="'category 1'">
      Option 1
    </glint-button>
    <glint-button *glintContextMenuOption="'category 1'">
      Option 2
    </glint-button>
    <glint-button *glintContextMenuOption="'category 2'">
      Option 3
    </glint-button>
  </glint-context-menu>
</div>
<glint-context-menu-portal/>
  • [glintContextMenu]: Binds a menu to a right-click event on the host element. The value should be a reference to a <glint-context-menu> component.
  • <glint-context-menu>: Define a context menu.
  • *glintContextMenuOption: Annotate menu options with this decorator. The value defines a category. Actions of the same category are grouped, and a dividing line is placed between each category.
  • <glint-context-menu-portal/>: Add this component to your page to support context menu's. Without this component, the menu's cannot be rendered.