Simple dropdown menu

Note that applying the class .md-menu-origin and md-menu-align-targetattributes ensure that the menu elements align.

Template

<PaperMenu as |menu|>

  <menu.trigger>
    <PaperButton @iconButton={{true}}>
      {{paper-icon "local_phone"}}
    </PaperButton>
  </menu.trigger>

  <menu.content @width={{4}} as |content|>
    {{#each this.items as |item|}}
      <content.menu-item @onClick={{action this.openSomething}}>
        {{paper-icon item.icon}}
        <span>{{item.title}}</span>
      </content.menu-item>
    {{/each}}

    <content.menu-item @onClick={{action this.openSomething}} @disabled={{true}}>
      {{paper-icon "adb"}}
      <span>This is disabled.</span>
    </content.menu-item>

    <PaperDivider />

    {{#each this.items as |item|}}
      <content.menu-item @onClick={{action this.openSomething}}>
        {{paper-icon item.icon}} {{item.title}}
      </content.menu-item>
    {{/each}}
  </menu.content>
</PaperMenu>

Menu Position Modes

The position attribute can be used to specify the positioning along the x and y axis.

Template

Use the position attribute to set where the menu should appear. The position attribute should be used together with .md-menu-origin and .md-menu-align-target classes to specify where it should position itself in respect to origin and align-target.

<div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p>Target Mode Positioning (default)</p>
    <PaperMenu @isOpen={{this.menuTwoIsOpen}} as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content as |content|>
        {{#each this.items as |item|}}
          <content.menu-item @onClick={{action this.openSomething}}>
            {{paper-icon item.icon class="md-menu-align-target"}}
            <span>{{item.title}}</span>
          </content.menu-item>
        {{/each}}
      </menu.content>

    </PaperMenu>
  </div>

  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p>Target mode with <code class="paper">offset</code></p>
    <PaperMenu @isOpen={{this.menuThreeIsOpen}} @offset="0 50" as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content as |content|>
        {{#each this.items as |item|}}
          <content.menu-item @onClick={{action this.openSomething}}>
            {{paper-icon item.icon class="md-menu-align-target"}}
            <span>{{item.title}}</span>
          </content.menu-item>
        {{/each}}
      </menu.content>
    </PaperMenu>
  </div>

  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p><code class="paper">position="target-right target"</code></p>
    <PaperMenu @isOpen={{this.menuFourIsOpen}} @position="target-right target" as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content as |content|>
        {{#each this.items as |item|}}
          <content.menu-item @onClick={{action this.openSomething}}>
            <p style="width: 190px;">{{item.title}}</p>
            {{paper-icon item.icon class="md-menu-align-target"}}
          </content.menu-item>
        {{/each}}
        {{#each this.items as |item|}}
          <content.menu-item @onClick={{action this.openSomething}}>
            <p style="width: 190px;">{{item.title}}</p>
            {{paper-icon item.icon class="md-menu-align-target"}}
          </content.menu-item>
        {{/each}}
        {{#each this.items as |item|}}
          <content.menu-item @onClick={{action this.openSomething}}>
            <p style="width: 190px;">{{item.title}}</p>
            {{paper-icon item.icon class="md-menu-align-target"}}
          </content.menu-item>
        {{/each}}
      </menu.content>
    </PaperMenu>
  </div>
</div>

Different Widths

paper-menu-content may specify a width attribute which will follow the official spec.

Template

<div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p>Wide menu (<code class="paper">width=6</code>)</p>
    <PaperMenu as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content @width={{6}} as |content|>
        {{#each this.options as |item|}}
          <content.menu-item @onClick={{action "openSomething"}}>
            <span class="md-menu-align-target">Option</span> {{item}}
          </content.menu-item>
        {{/each}}
      </menu.content>
    </PaperMenu>
  </div>

  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p>Medium menu (<code class="paper">width=4</code>)</p>
    <PaperMenu as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content @width={{4}} as |content|>
        {{#each this.options as |item|}}
          <content.menu-item @onClick={{action "openSomething"}}>
            <span class="md-menu-align-target">Option</span> {{item}}
          </content.menu-item>
        {{/each}}
      </menu.content>
    </PaperMenu>
  </div>

  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p>Small menu (<code class="paper">width=2</code>)</p>
    <PaperMenu as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content @width={{2}} as |content|>
        {{#each this.options as |item|}}
          <content.menu-item @onClick={{action "openSomething"}}>
            <span class="md-menu-align-target">Option</span> {{item}}
          </content.menu-item>
        {{/each}}
      </menu.content>
    </PaperMenu>
  </div>
</div>

Dense menu

paper-menu-content may specify a `dense` boolean attribute.

Template

<div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
  <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
    <p>Dense menu (<code class="paper">dense=true</code>)</p>
    <PaperMenu as |menu|>
      <menu.trigger>
        <PaperButton @onClick={{null}} @iconButton={{true}}>
          {{paper-icon "local_phone" class="md-menu-origin"}}
        </PaperButton>
      </menu.trigger>

      <menu.content @dense={{true}} as |content|>
        {{#each this.options as |item|}}
          <content.menu-item @onClick={{action "openSomething"}}>
            <span class="md-menu-align-target">Option</span> {{item}}
          </content.menu-item>
        {{/each}}
      </menu.content>
    </PaperMenu>
  </div>
</div>