CdkMenu

npm install @angular/cdk

import {CdkMenuModule} from '@angular/cdk/menu';

<button [cdkMenuTriggerFor]="menu">Open Menu</button>

<ng-template #menu>
  <div class="menu" cdkMenu>
    <button cdkMenuItem>Item 1</button>
    <button cdkMenuItem>Item 2</button>
    <button cdkMenuItem>Item 3</button>
  </div>
</ng-template>

<div cdkMenu>
  <button cdkMenuItem>Regular Item</button>
  
  <button cdkMenuItem [cdkMenuTriggerFor]="submenu">
    With Submenu
  </button>
  
  <ng-template #submenu>
    <div cdkMenu>
      <button cdkMenuItem>Submenu Item 1</button>
      <button cdkMenuItem>Submenu Item 2</button>
    </div>
  </ng-template>
</div>

<div cdkMenuBar>
  <button cdkMenuItem [cdkMenuTriggerFor]="fileMenu">File</button>
  <button cdkMenuItem [cdkMenuTriggerFor]="editMenu">Edit</button>
  <button cdkMenuItem [cdkMenuTriggerFor]="helpMenu">Help</button>
</div>

<ng-template #fileMenu>
  <div cdkMenu>
    <button cdkMenuItem>New</button>
    <button cdkMenuItem>Open</button>
    <button cdkMenuItem>Save</button>
  </div>
</ng-template>