Context Menu

A context menu displays a list of actions or options triggered by a right-click or long-press on an element.

Import

Import the Context Menu primitives from ng-primitives/context-menu.

import {
  NgpContextMenu,
  NgpContextMenuItem,
  NgpContextMenuTrigger,
  NgpContextMenuSubmenuTrigger,
  NgpContextMenuItemCheckbox,
  NgpContextMenuItemRadioGroup,
  NgpContextMenuItemRadio,
  NgpContextMenuItemIndicator,
} from 'ng-primitives/context-menu';

Usage

Assemble the context menu directives in your template.

<div [ngpContextMenuTrigger]="menu">Right-click me</div>

<ng-template #menu>
  <div ngpContextMenu>
    <button ngpContextMenuItem>Cut</button>
    <button ngpContextMenuItem>Copy</button>
    <button ngpContextMenuItem>Paste</button>
  </div>
</ng-template>

Reusable Component

Create reusable components that use the NgpContextMenu directive.

Examples

Here are some additional examples of how to use the Context Menu primitives.

Submenu

The context menu can contain submenus, which are nested menus that can be opened by hovering on a menu item.

API Reference

The following directives are available to import from the ng-primitives/context-menu package:

NgpContextMenuTrigger

NgpContextMenu

NgpContextMenuItem

NgpContextMenuSubmenuTrigger

NgpContextMenuItemCheckbox

NgpContextMenuItemRadioGroup

NgpContextMenuItemRadio

NgpContextMenuItemIndicator

Styling

For the context menu to be positioned correctly relative to the cursor, it should use fixed positioning. For example, you can use the following CSS:

[ngpContextMenu] {
  position: fixed;
}

Animations

The ngpContextMenu primitive adds a CSS custom property --ngp-menu-transform-origin to the element that can be used to animate the menu from the cursor position.

The ngpContextMenu will also add the data-enter and data-exit attributes to the element when it is being added or removed from the DOM. This can be used to trigger animations.

[ngpContextMenu][data-enter] {
  animation: fade-in 0.2s ease-in-out;
}

[ngpContextMenu][data-exit] {
  animation: fade-out 0.2s ease-in-out;
}

Global Configuration

You can configure the default options for all context menus in your application by using the provideContextMenuConfig function in a providers array.

import { provideContextMenuConfig } from 'ng-primitives/context-menu';

bootstrapApplication(AppComponent, {
  providers: [
    provideContextMenuConfig({
      offset: 2,
      flip: true,
      container: document.body,
      scrollBehavior: 'close',
    }),
  ],
});

NgpContextMenuConfig

Accessibility

Adheres to the WAI-ARIA Menu Pattern.

Keyboard Interactions

Key	Description
Enter	Activates the focused menu item. Closes all menus unless the item is a checkbox or radio item.
Escape	Closes all open menus.
ArrowDown	Moves focus to the next menu item.
ArrowUp	Moves focus to the previous menu item.
ArrowRight	Opens a submenu when focused on a submenu trigger.
ArrowLeft	Closes the current submenu and moves focus to the parent submenu trigger.
Home	Moves focus to the first menu item.
End	Moves focus to the last menu item.