ipsos-components/src/demo-app/a11y/menu/menu-a11y.html

Material Design components for Angular

<div class="demo-menu">
  
  <section>
    <h2>Icon Trigger</h2>
    <mat-menu #menu1="matMenu">
      <button mat-menu-item> Settings </button>
      <button mat-menu-item> Help </button>
    </mat-menu>

    <button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Open Menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </section>

  <section>
    <h2>Menu with Icons</h2>
    <button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Open Menu">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #menu2="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
      <button mat-menu-item>
        <mat-icon>voicemail</mat-icon>
        <span>Check voicemail</span>
      </button>
      <button mat-menu-item>
        <mat-icon>notifications_off</mat-icon>
        <span>Disable alerts</span>
      </button>
    </mat-menu>
  </section>

  <section>
    <h2>Menu with links</h2>
    <button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Learn more about Angular">
      <mat-icon>more_vert</mat-icon>
    </button>
    
    <mat-menu #menu2="matMenu">
      <a href="http://angular.io" mat-menu-item>
        Angular
      </a>
      <a href="http://material.angular.io" mat-menu-item>
        Angular Material
      </a>
    </mat-menu>
  </section>

</div>