Ivorie

Context Menu

A menu that opens at the pointer on right-click.

import { … } from '@inlaylab/ivorie/context-menu'
Right-click here 
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_CONTEXT_MENU_IMPORTS } from '@inlaylab/ivorie/context-menu';

@Component({
  selector: 'demo-context-menu',
  imports: [IV_CONTEXT_MENU_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-context-menu>
      <div ivContextMenuTrigger class="flex h-36 w-72 items-center justify-center rounded-xl border border-dashed text-sm">
        Right-click here
      </div>
      <iv-dropdown-menu-content class="w-52">
        <iv-dropdown-menu-item>Back<iv-dropdown-menu-shortcut>⌘[</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
        <iv-dropdown-menu-item [disabled]="true">Forward<iv-dropdown-menu-shortcut>⌘]</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
        <iv-dropdown-menu-item>Reload<iv-dropdown-menu-shortcut>⌘R</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
        <iv-dropdown-menu-separator />
        <iv-dropdown-menu-checkbox-item [checked]="true">Show bookmarks</iv-dropdown-menu-checkbox-item>
        <iv-dropdown-menu-separator />
        <iv-dropdown-menu-item variant="destructive">Delete</iv-dropdown-menu-item>
      </iv-dropdown-menu-content>
    </iv-context-menu>
  `,
})
export default class ContextMenuDemo {}

Installation

CLInpm
npx ivorie add context-menu

The menu parts are the Dropdown Menu parts. IV_CONTEXT_MENU_IMPORTS includes them.

Usage

import { IV_CONTEXT_MENU_IMPORTS } from '@inlaylab/ivorie/context-menu';
<iv-context-menu>
  <div ivContextMenuTrigger>Right-click here</div>
  <iv-dropdown-menu-content>
    <iv-dropdown-menu-item>Copy</iv-dropdown-menu-item>
  </iv-dropdown-menu-content>
</iv-context-menu>

API

[ivContextMenuTrigger]

Name Type Default Description
disabled boolean false Keep the browser menu.

Content, items, groups, checkbox and radio items, and sub menus: see Dropdown Menu.

Accessibility

  • Right-click or the keyboard context-menu key opens it. The browser menu is blocked.
  • Keys inside the menu work as in Dropdown Menu. Escape closes it.