<div cdkMenuBar>
  <!-- #docregion file-trigger -->
  <button class="example-menu-bar-item" cdkMenuItem [cdkMenuTriggerFor]="file">File</button>
  <!-- #enddocregion file-trigger -->
  <button class="example-menu-bar-item" cdkMenuItem [cdkMenuTriggerFor]="edit">Edit</button>
  <button class="example-menu-bar-item" cdkMenuItem [cdkMenuTriggerFor]="format">Format</button>
</div>

<ng-template #file>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Share</button>
    <hr />
    <button class="example-menu-item" cdkMenuItem [cdkMenuTriggerFor]="new_doc">
      New <span>&#10148;</span>
    </button>
    <button class="example-menu-item" cdkMenuItem>Open</button>
    <button class="example-menu-item" cdkMenuItem>Make a Copy</button>
    <hr />
    <button class="example-menu-item" cdkMenuItem [cdkMenuTriggerFor]="download">
      Download <span>&#10148;</span>
    </button>
  </div>
</ng-template>

<ng-template #edit>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Undo</button>
    <button class="example-menu-item" cdkMenuItem>Redo</button>
    <hr />
    <button class="example-menu-item" cdkMenuItem>Cut</button>
    <button class="example-menu-item" cdkMenuItem>Copy</button>
    <button class="example-menu-item" cdkMenuItem>Paste</button>
  </div>
</ng-template>

<ng-template #format >
  <div class="example-menu" cdkMenu>
    <div class="example-menu-group" cdkMenuGroup>
      <button cdkMenuItemCheckbox class="example-menu-item" cdkMenuItemChecked>Bold</button>
      <button cdkMenuItemCheckbox class="example-menu-item">Italic</button>
    </div>
    <hr />
    <div class="example-menu-group" cdkMenuGroup>
      <button cdkMenuItemRadio class="example-menu-item">Small</button>
      <button cdkMenuItemRadio class="example-menu-item" cdkMenuItemChecked>Normal</button>
      <button cdkMenuItemRadio class="example-menu-item">Big</button>
    </div>
  </div>
</ng-template>

<ng-template #new_doc>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Document</button>
    <button class="example-menu-item" cdkMenuItem>From template</button>
    <hr />
    <button class="example-menu-item" cdkMenuItem>Spreadsheet</button>
    <button class="example-menu-item" cdkMenuItem>Presentation</button>
    <button class="example-menu-item" cdkMenuItem>Form</button>
  </div>
</ng-template>

<ng-template #download>
  <div class="example-menu" cdkMenu>
    <button class="example-menu-item" cdkMenuItem>Microsoft Word</button>
    <button class="example-menu-item" cdkMenuItem>PDF</button>
    <button class="example-menu-item" cdkMenuItem>Plain text</button>
  </div>
</ng-template>
