Left Aligned Menu Below Button

  • 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

  • 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

  • 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

  • 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>