{{#if menuItems.length}}
  <div class="header-menu-item dropdown pull-right">
    <button type="button" class="btn btn-default dropdown-toggle"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
      >
      <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu">
      {{#each menuItems as |menuItem|}}
      <li title="{{menuItem.desc}}"
            data-warpjs-name="{{menuItem.name}}"
            data-warpjs-desc="{{menuItem.desc}}"
            data-warpjs-type="{{menuItem.type}}"
            data-warpjs-id="{{menuItem.id}}"
            data-warpjs-js-script-url="{{menuItem._links.jsScript.href}}"
            data-warpjs-plugin-identifier="{{menuItem.pluginIdentifier}}"
            data-warpjs-plugin-root-url="{{menuItem._links.plugin.href}}"
            >
          {{#if menuItem._links.jsScript.href}}
            <script type="application/javascript">
              (function() {
                var event = new CustomEvent('warpjs-add-action-plugin', {
                  detail: {
                    href: "{{menuItem._links.jsScript.href}}"
                  }
                });
                document.dispatchEvent(event);
              })();
            </script>
            <span class="glyphicon glyphicon-{{menuItem.glyphicon}}"></span>&nbsp;{{menuItem.label}}
          {{else}}
            <a href="{{menuItem._links.path.href}}">
              <span class="glyphicon glyphicon-{{menuItem.glyphicon}}"></span>&nbsp;{{menuItem.label}}
            </a>
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </div>
{{/if}}