<span>

  <script type="text/ng-template" id="withsubmenus.html">
    <span class="hawtio-dropdown dropdown" ng-class="open(config)" ng-click="action(config, $event)">
      <i ng-class="icon(config)"></i>&nbsp;{{config.title}}
      <span ng-show="config.items" ng-hide="config.submenu" class="caret"></span>
      <span ng-show="config.items && config.submenu" class="submenu-caret"></span>

      <ul ng-hide="config.action" ng-show="config.items" class="dropdown-menu" ng-class="submenu(config)">
        <li ng-repeat="item in config.items track by $index" ng-init="config=item; config['submenu']=true" ng-include="'withsubmenus.html'">
        </li>
      </ul>
    </span>
  </script>

  <script type="text/ng-template" id="withoutsubmenus.html">
    <span class="hawtio-dropdown dropdown" ng-class="open(config)" ng-click="action(config, $event)">
      <i ng-class="icon(config)"></i>&nbsp;{{config.title}}
      <span ng-show="config.items && config.items.length > 0" class="caret"></span>

      <ul ng-hide="config.action" ng-show="config.items" class="dropdown-menu" ng-class="submenu(config)">
        <li ng-repeat="item in config.items track by $index">
          <span class="menu-item" ng-click="action(item, $event)">
            <i ng-class="icon(item)"></i>&nbsp;{{item.title}}
            <span ng-show="item.items" class="submenu-caret"></span>
          </span>
        </li>
      </ul>
    </span>
  </script>

  <span compile="menuStyle"></span>


</span>
