ipsos-components/src/e2e-app/menu/menu-e2e.html

Material Design components for Angular

<div>
  <div style="float:left">
    <div id="text">{{ selected }}</div>
    <button id="start">START</button>
    <button [matMenuTriggerFor]="menu" id="trigger">TRIGGER</button>
    <button [matMenuTriggerFor]="menu" id="trigger-two">TRIGGER 2</button>

    <mat-menu #menu="matMenu" yPosition="below" class="custom">
      <button mat-menu-item (click)="selected='one'">One</button>
      <button mat-menu-item (click)="selected='two'">Two</button>
      <button mat-menu-item (click)="selected='three'" disabled>Three</button>
      <button mat-menu-item>Four</button>
    </mat-menu>

    <button [matMenuTriggerFor]="beforeMenu" id="before-t">
      BEFORE
    </button>
    <mat-menu xPosition="before" yPosition="below" class="before" #beforeMenu="matMenu">
      <button mat-menu-item>Item</button>
    </mat-menu>

    <div class="bottom-row">
      <button [matMenuTriggerFor]="aboveMenu" id="above-t">ABOVE</button>
      <mat-menu yPosition="above" class="above" #aboveMenu="matMenu">
        <button mat-menu-item>Item</button>
      </mat-menu>

      <button [matMenuTriggerFor]="combined" id="combined-t">
        BOTH
      </button>
      <mat-menu xPosition="before" yPosition="above" class="combined" #combined="matMenu">
        <button mat-menu-item>Item</button>
      </mat-menu>

    </div>
  </div>
</div>