<md-card>
  <md-card-title>Menus (dropdowns)</md-card-title>
  <md-card-subtitle>md-menu is a list of options that displays when triggered.</md-card-subtitle>

  <md-card-content>
    <p>You clicked on: {{ selected }}</p>
  </md-card-content>
  <md-toolbar>
    <button md-icon-button [md-menu-trigger-for]="menu" aria-label="Open basic menu">
      <md-icon>more_vert</md-icon>
    </button>
  </md-toolbar>
  <md-menu #menu="mdMenu">
    <button md-menu-item *ngFor="let item of items" (click)="select(item.text)" [disabled]="item.disabled">
      {{ item.text }}
    </button>
  </md-menu>

  <md-card-content>
    <p> Clicking these will navigate:</p>
  </md-card-content>
  <md-toolbar>
    <button md-icon-button [md-menu-trigger-for]="anchorMenu" aria-label="Open anchor menu">
      <md-icon>more_vert</md-icon>
    </button>
  </md-toolbar>
  <md-menu #anchorMenu="mdMenu">
    <a md-menu-item *ngFor="let item of items" href="http://www.google.com" [disabled]="item.disabled">
      {{ item.text }}
    </a>
  </md-menu>

  <md-card-content>
    <p>Position x: before</p>
  </md-card-content>
  <md-toolbar class="end-icon">
    <button md-icon-button [md-menu-trigger-for]="posXMenu" aria-label="Open x-positioned menu">
      <md-icon>more_vert</md-icon>
    </button>
  </md-toolbar>

  <md-menu x-position="before" #posXMenu="mdMenu" class="before">
    <button md-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
      <md-icon>{{ item.icon }}</md-icon>
      {{ item.text }}
    </button>
  </md-menu>

  <md-card-content>
    <p>Position y: above</p>
  </md-card-content>
  <md-toolbar>
    <button md-icon-button [md-menu-trigger-for]="posYMenu" aria-label="Open y-positioned menu">
      <md-icon>more_vert</md-icon>
    </button>
  </md-toolbar>

  <md-menu y-position="above" #posYMenu="mdMenu">
    <button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
      {{ item.text }}
    </button>
  </md-menu>
</md-card>