To display mat-menu items below the mat-menu button

user_8856403 0
Viewed 6941

I am using Menu with icons component.Here on clicking the button(i,e menu).The menu items(i,e mat-menu items) are displaying above the button as shown in below image.

enter image description here

I want the items(ex logout) to be displayed below the menu button.I tried giving margin and padding properties still no result.

Here is the stackblitz link.

angular-material css
1 Answers

If you just want to prevent the overlapping the trigger of the menu itself, the mat-menu has a custom attribute just for this. It is called overlapTrigger and if you set it to false, the menu-item won't overlap your trigger (the account icon). See example code below:

<mat-menu #menu="matMenu" [overlapTrigger]="false">
   <button mat-menu-item>
       <mat-icon>power_settings_new</mat-icon>
       <span>Logout</span>
   </button>
</mat-menu>

Full example at forked stackblitz

You can read more about it right here.

user_39862580
Related