npm install @angular/aria

import {Component} from '@angular/core';
import {Menu, MenuItem, MenuTrigger} from '@angular/aria';

@Component({
  selector: 'app-menu-example',
  imports: [Menu, MenuItem, MenuTrigger],
  template: `
    <button ngMenuTrigger [menu]="fileMenu">File</button>

    <div ngMenu #fileMenu="ngMenu">
      <div ngMenuItem value="new" (click)="onNew()">New</div>
      <div ngMenuItem value="open" (click)="onOpen()">Open</div>
      <div ngMenuItem value="save" (click)="onSave()">Save</div>
      <div ngMenuItem value="save-as" (click)="onSaveAs()">Save As...</div>
    </div>
  `
})
export class MenuExample {
  onNew() { console.log('New'); }
  onOpen() { console.log('Open'); }
  onSave() { console.log('Save'); }
  onSaveAs() { console.log('Save As'); }
}

<button ngMenuTrigger [menu]="mainMenu">Options</button>

<div ngMenu #mainMenu="ngMenu">
  <div ngMenuItem value="star">Star</div>
  <div ngMenuItem value="edit">Edit</div>
  <div ngMenuItem value="more" [submenu]="subMenu">More</div>
</div>

<div ngMenu #subMenu="ngMenu">
  <div ngMenuItem value="sub-item-1">Sub Item 1</div>
  <div ngMenuItem value="sub-item-2">Sub Item 2</div>
  <div ngMenuItem value="sub-item-3">Sub Item 3</div>
</div>

import {Component} from '@angular/core';
import {MenuBar, Menu, MenuItem, MenuTrigger} from '@angular/aria';

@Component({
  selector: 'app-menubar-example',
  imports: [MenuBar, Menu, MenuItem, MenuTrigger],
  template: `
    <div ngMenuBar>
      <button ngMenuTrigger [menu]="fileMenu">File</button>
      <button ngMenuTrigger [menu]="editMenu">Edit</button>
      <button ngMenuTrigger [menu]="viewMenu">View</button>
    </div>

    <div ngMenu #fileMenu="ngMenu">
      <div ngMenuItem value="new">New</div>
      <div ngMenuItem value="open">Open</div>
      <div ngMenuItem value="save">Save</div>
    </div>

    <div ngMenu #editMenu="ngMenu">
      <div ngMenuItem value="undo">Undo</div>
      <div ngMenuItem value="redo">Redo</div>
      <div ngMenuItem value="cut">Cut</div>
      <div ngMenuItem value="copy">Copy</div>
    </div>

    <div ngMenu #viewMenu="ngMenu">
      <div ngMenuItem value="zoom-in">Zoom In</div>
      <div ngMenuItem value="zoom-out">Zoom Out</div>
    </div>
  `
})
export class MenuBarExample {}

<div (contextmenu)="openContextMenu($event)">
  Right-click here
</div>

<div ngMenu #contextMenu="ngMenu">
  <div ngMenuItem value="copy">Copy</div>
  <div ngMenuItem value="paste">Paste</div>
  <div ngMenuItem value="delete">Delete</div>
</div>

<div ngMenu>
  <div ngMenuItem value="available">Available Action</div>
  <div ngMenuItem value="unavailable" [disabled]="true">Unavailable Action</div>
</div>