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>