For more info please check the components's official demos & documentation demos & documentation

<mat-menu> is a floating panel containing list of options.

Menus support displaying <mat-icon> elements before the menu item text.

Material supports the ability for an mat-menu-item to open a sub-menu. To do so, you have to define your root menu and sub-menus, in addition to setting the [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu

By default, the menu will display below (y-axis), after (x-axis), and overlapping its trigger. The position can be changed using the xPosition ( before | after) and yPosition ( above | below) attributes. The menu can be be forced to not overlap the trigger using [overlapTrigger]="false" attribute.