function MenuBarDirective($mdUtil, $mdTheming) {
  return {
    restrict: 'E',
    require: 'mdMenuBar',
    controller: 'MenuBarController',

    compile: function compile(templateEl, templateAttrs) {
      if (!templateAttrs.ariaRole) {
        templateEl[0].setAttribute('role', 'menubar');
      }
      angular.forEach(templateEl[0].children, function(menuEl) {
        if (menuEl.nodeName == 'MD-MENU') {
          if (!menuEl.hasAttribute('md-position-mode')) {
            menuEl.setAttribute('md-position-mode', 'left bottom');

            // Since we're in the compile function and actual `md-buttons` are not compiled yet,
            // we need to query for possible `md-buttons` as well.
            menuEl.querySelector('button, a, md-button').setAttribute('role', 'menuitem');
          }
          var contentEls = $mdUtil.nodesToArray(menuEl.querySelectorAll('md-menu-content'));
          angular.forEach(contentEls, function(contentEl) {
            contentEl.classList.add('md-menu-bar-menu');
            contentEl.classList.add('md-dense');
            if (!contentEl.hasAttribute('width')) {
              contentEl.setAttribute('width', 5);
            }
          });
        }
      });

      // Mark the child menu items that they're inside a menu bar. This is necessary,
      // because mnMenuItem has special behaviour during compilation, depending on
      // whether it is inside a mdMenuBar. We can usually figure this out via the DOM,
      // however if a directive that uses documentFragment is applied to the child (e.g. ngRepeat),
      // the element won't have a parent and won't compile properly.
      templateEl.find('md-menu-item').addClass('md-in-menu-bar');

      return function postLink(scope, el, attr, ctrl) {
        el.addClass('_md');     // private md component indicator for styling
        $mdTheming(scope, el);
        ctrl.init();
      };
    }
  };

}
@ngdoc directive
@name mdMenuBar
@module material.components.menuBar
@restrict E
@description

Menu bars are containers that hold multiple menus. They change the behavior and appearance
of the `md-menu` directive to behave similar to an operating system provided menu.

@usage
<hljs lang="html">
<md-menu-bar>
  <md-menu>
    <button ng-click="$mdMenu.open()">
      File
    </button>
    <md-menu-content>
      <md-menu-item>
        <md-button ng-click="ctrl.sampleAction('share', $event)">
          Share...
        </md-button>
      </md-menu-item>
      <md-menu-divider></md-menu-divider>
      <md-menu-item>
      <md-menu-item>
        <md-menu>
          <md-button ng-click="$mdMenu.open()">New</md-button>
          <md-menu-content>
            <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
            <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
            <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
            <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
            <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
          </md-menu-content>
        </md-menu>
      </md-menu-item>
    </md-menu-content>
  </md-menu>
</md-menu-bar>
</hljs>

## Menu Bar Controls

You may place `md-menu-item`s that function as controls within menu bars.
There are two modes that are exposed via the `type` attribute of the `md-menu-item`.
`type="checkbox"` will function as a boolean control for the `ng-model` attribute of the
`md-menu-item`. `type="radio"` will function like a radio button, setting the `ngModel`
to the `string` value of the `value` attribute. If you need non-string values, you can use
`ng-value` to provide an expression (this is similar to how angular's native `input[type=radio]`
works.

If you want either to disable closing the opened menu when clicked, you can add the
`md-prevent-menu-close` attribute to the `md-menu-item`. The attribute will be forwarded to the
`button` element that is generated.

<hljs lang="html">
<md-menu-bar>
 <md-menu>
   <button ng-click="$mdMenu.open()">
     Sample Menu
   </button>
   <md-menu-content>
     <md-menu-item type="checkbox" ng-model="settings.allowChanges" md-prevent-menu-close>
       Allow changes
     </md-menu-item>
     <md-menu-divider></md-menu-divider>
     <md-menu-item type="radio" ng-model="settings.mode" ng-value="1">Mode 1</md-menu-item>
     <md-menu-item type="radio" ng-model="settings.mode" ng-value="2">Mode 2</md-menu-item>
     <md-menu-item type="radio" ng-model="settings.mode" ng-value="3">Mode 3</md-menu-item>
   </md-menu-content>
 </md-menu>
</md-menu-bar>
</hljs>


### Nesting Menus

Menus may be nested within menu bars. This is commonly called cascading menus.
To nest a menu place the nested menu inside the content of the `md-menu-item`.
<hljs lang="html">
<md-menu-item>
  <md-menu>
    <button ng-click="$mdMenu.open()">New</md-button>
    <md-menu-content>
      <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
      <md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
      <md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
      <md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
      <md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
    </md-menu-content>
  </md-menu>
</md-menu-item>
</hljs>