Menu

<button xuiButton [xuiMenuTriggerFor]="menu">File actions</button>
<ng-template #menu>
  <xui-menu>
    <button xuiMenuItem icon="matDriveFileRenameOutlineRound">Rename<span menuItemLabel>⌘R</span></button>
    <button xuiMenuItem icon="matContentCopyRound">Duplicate<span menuItemLabel>⌘D</span></button>
    <xui-menu-divider />
    <button xuiMenuItem icon="matDeleteRound" color="error">Delete<span menuItemLabel>⌫</span></button>
  </xui-menu>
</ng-template>

<button xuiButton [xuiMenuTriggerFor]="menu">View</button>
<ng-template #menu>
  <xui-menu>
    <xui-menu-divider title="Layout" />
    <button xuiMenuItem selected>Grid</button>
    <button xuiMenuItem>List</button>
    <xui-menu-divider title="Sort" />
    <button xuiMenuItem>Name</button>
    <button xuiMenuItem selected>Modified</button>
  </xui-menu>
</ng-template>

<button xuiButton [xuiMenuTriggerFor]="menu">Organise</button>
<ng-template #menu>
  <xui-menu>
    <button xuiMenuItem icon="matDriveFileRenameOutlineRound">Rename</button>
    <button xuiMenuItem [xuiMenuTriggerFor]="copyTo">Copy to…</button>
    <xui-menu-divider />
    <button xuiMenuItem color="error" icon="matDeleteRound">Delete</button>
  </xui-menu>
</ng-template>
<ng-template #copyTo>
  <xui-menu>
    <button xuiMenuItem>Documents</button>
    <button xuiMenuItem>Pictures</button>
    <button xuiMenuItem [xuiMenuTriggerFor]="projects">Projects</button>
  </xui-menu>
</ng-template>
<ng-template #projects>
  <xui-menu>
    <button xuiMenuItem>storefront</button>
    <button xuiMenuItem>warehouse</button>
  </xui-menu>
</ng-template>

<button xuiButton [xuiMenuTriggerFor]="menu">Edit</button>
<ng-template #menu>
  <xui-menu>
    <button xuiMenuItem>Undo</button>
    <button xuiMenuItem disabled>Redo</button>
    <button xuiMenuItem disabled>Paste</button>
  </xui-menu>
</ng-template>