Menu
MatMenu provides a floating panel of selectable options triggered by a button or other element.
Basic Menu
A simple dropdown menu with text items triggered by a button.
HTML
TS
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Refresh</button>
<button mat-menu-item>Settings</button>
<button mat-menu-item>Help</button>
<mat-divider></mat-divider>
<button mat-menu-item>Sign out</button>
</mat-menu>Menu with Icons
Menu items with leading icons for better visual recognition.
HTML
TS
<button mat-raised-button color="accent" [matMenuTriggerFor]="iconMenu">Actions</button>
<mat-menu #iconMenu="matMenu">
<button mat-menu-item>
<mat-icon>folder_open</mat-icon>
<span>Folder</span>
</button>
<button mat-menu-item>
<mat-icon>share</mat-icon>
<span>Share</span>
</button>
<button mat-menu-item>
<mat-icon>drive_file_move</mat-icon>
<span>Move</span>
</button>
<mat-divider></mat-divider>
<button mat-menu-item>
<mat-icon>delete</mat-icon>
<span>Delete</span>
</button>
</mat-menu>