<!-- Menu Trigger Button -->
<button
  matButton="filled"
  class="sz-medium sh-squircle"
  [matMenuTriggerFor]="actionMenu"
  aria-label="Open action menu">
  <mat-icon class="material-symbols-outlined">menu_open</mat-icon>
  Actions
  <mat-icon class="material-symbols-outlined">arrow_drop_down</mat-icon>
</button>

<!-- Mat Menu -->
<mat-menu #actionMenu="matMenu" class="sz-medium sh-squircle">
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">edit</mat-icon>
    <span>Edit document</span>
  </button>
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">content_copy</mat-icon>
    <span>Duplicate</span>
  </button>
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">share</mat-icon>
    <span>Share link</span>
  </button>
  <mat-divider></mat-divider>
  <button mat-menu-item class="destructive">
    <mat-icon class="material-symbols-outlined">delete</mat-icon>
    <span>Delete permanently</span>
  </button>
</mat-menu>

<!-- Nested Cascading Menu -->
<button
  matButton="tonal"
  class="sz-medium sh-squircle"
  [matMenuTriggerFor]="rootMenu">
  <mat-icon class="material-symbols-outlined">folder_open</mat-icon>
  File Manager
</button>

<mat-menu #rootMenu="matMenu" class="sz-medium sh-squircle">
  <button mat-menu-item [matMenuTriggerFor]="shareSubmenu">
    <mat-icon class="material-symbols-outlined">share</mat-icon>
    <span>Share Options</span>
  </button>
  <button mat-menu-item [matMenuTriggerFor]="exportSubmenu">
    <mat-icon class="material-symbols-outlined">download</mat-icon>
    <span>Export Format</span>
  </button>
  <mat-divider></mat-divider>
  <button mat-menu-item class="destructive">
    <mat-icon class="material-symbols-outlined">delete_forever</mat-icon>
    <span>Trash</span>
  </button>
</mat-menu>

<!-- Submenu: Share -->
<mat-menu #shareSubmenu="matMenu" class="sz-medium sh-squircle">
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">mail</mat-icon>
    <span>Send Email</span>
  </button>
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">link</mat-icon>
    <span>Copy Link</span>
  </button>
</mat-menu>

<!-- Submenu: Export -->
<mat-menu #exportSubmenu="matMenu" class="sz-medium sh-squircle">
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">picture_as_pdf</mat-icon>
    <span>PDF Document</span>
  </button>
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">csv</mat-icon>
    <span>CSV Spreadsheet</span>
  </button>
</mat-menu>

<!-- Icon Button Trigger Menu -->
<button
  matIconButton
  class="sz-medium sh-squircle"
  [matMenuTriggerFor]="moreMenu"
  aria-label="More options">
  <mat-icon class="material-symbols-outlined">more_vert</mat-icon>
</button>

<mat-menu #moreMenu="matMenu" class="sz-medium sh-squircle">
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">settings</mat-icon>
    <span>Preferences</span>
  </button>
  <button mat-menu-item>
    <mat-icon class="material-symbols-outlined">help</mat-icon>
    <span>Help & Support</span>
  </button>
  <mat-divider></mat-divider>
  <button mat-menu-item class="destructive">
    <mat-icon class="material-symbols-outlined">logout</mat-icon>
    <span>Sign Out</span>
  </button>
</mat-menu>