MDL-Menu

Left Aligned Menu Below Button

_i_

• Some Action

• Another Action

• Disabled Action

• Yet Another Action

  <!-- Left aligned menu below button -->
  <button id="leftBelowButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
      <i class="material-icons">i</i>
  </button>
  <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left mdl-js-ripple-effect" for="leftBelowButton">
      <li class="mdl-menu__item">Some Action</li>
      <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
      <li class="mdl-menu__item" disabled>Disabled Action</li>
      <li class="mdl-menu__item">Yet Another Action</li>
  </ul>

  `

  Right Aligned Menu Below Button

  _i_

• Some Action

• Another Action

• Disabled Action

• Yet Another Action

  `    <!-- Right aligned menu below button -->
      <button id="rightBelowButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
          <i class="material-icons">i</i>
      </button>
      <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="rightBelowButton">
          <li class="mdl-menu__item">Some Action</li>
          <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
          <li class="mdl-menu__item" disabled>Disabled Action</li>
          <li class="mdl-menu__item">Yet Another Action</li>
      </ul>
  `

  Left Aligned Menu Above Button

  _i_

• Some Action

• Another Action

• Disabled Action

• Yet Another Action

  `    <!-- Left aligned menu above button -->
      <button id="leftAboveButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
          <i class="material-icons">i</i>
      </button>
      <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="leftAboveButton">
          <li class="mdl-menu__item">Some Action</li>
          <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
          <li class="mdl-menu__item" disabled>Disabled Action</li>
          <li class="mdl-menu__item">Yet Another Action</li>
      </ul>
  `

  Right Aligned Menu Above Button

  _i_

• Some Action

• Another Action

• Disabled Action

• Yet Another Action

  `    <!-- Right aligned menu above button -->
      <button id="rightAboveButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
          <i class="material-icons">i</i>
      </button>
      <ul class="mdl-menu mdl-js-menu mdl-menu--top-right mdl-js-ripple-effect" for="rightAboveButton">
          <li class="mdl-menu__item">Some Action</li>
          <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
          <li class="mdl-menu__item" disabled>Disabled Action</li>
          <li class="mdl-menu__item">Yet Another Action</li>
      </ul>