Angular Material Menu

admin

8 years ago

Angular Material Menu : Menus are an important component of any framework and it provides interface for navigation. Here in this tutorial we are going to explain how you can create Angular Material Menu. You can also use our online editor to edit and run the code online.

Angular Material Menu Example

Menu elements are opened when clicked and provides additional options. Directive <md-menu> is used to create menu in Angular Material. <md-menu> contains two child elements : 1. First element used to open the menu options. 2. Second element is <md-menu-content> which contains the content of the menu element which is opened when clicked on menu button. Basically <md-menu-content> contains the <md-menu-item> but you can also add custom elements. Let us first create a basic example to understand how it works.

Angular Material Menu Example:


   
      
      
      
      
      
      
	  
	 
      
      
   
    
  <div ng-controller="MyController as ctrl" ng-cloak=""> 
  <md-content layout-padding="">
  <md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
        <i class="material-icons">settings</i>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button ng-click="">
            <i class="material-icons">border_color</i>
            Edit
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>
           <i class="material-icons">note_add</i>
            Add
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>     
         <md-menu-item>
          <md-button>
          <i class="material-icons">delete</i>
          </md-button>
        </md-menu-item>  
      </md-menu-content>
    </md-menu>
  </md-content>
  </div>

Try It On →

In the above example we have created a simple menu in which a list of actions is opened when you click on the settings icons. Here is the output of the above example when you click on the above demo –

* md-position-mode(string):
This is used for position mode using x, y axis. Default value for this is target,target.
* md-offset(string):
If you want to add offset to apply in the dropdown after the position x, y. 0,0 is the default value.

Learn More

Let us have some example and demo about the Angular Material Menus.

Add Menu Width

If you want to add menu with, you can use width attribute to add width as following-

Wide Menu(width=6) is used for wide menu.
Medium Menu(width=4) is used for medium menu.
Small Menu(width=2) is used for small menu.

Here is an example with width example-

Here is an example with width example:

<md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
        <i class="material-icons">settings</i> Wide Menu
      </md-button>
      <md-menu-content width="6">
        <md-menu-item>
          <md-button ng-click="">
            <i class="material-icons">border_color</i>
            Edit
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>
           <i class="material-icons">note_add</i>
            Add
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>     
         <md-menu-item>
          <md-button>
          <i class="material-icons">delete</i>
          </md-button>
        </md-menu-item>  
      </md-menu-content>
    </md-menu>
    <md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
        <i class="material-icons">settings</i> Medium Menu
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button ng-click="">
            <i class="material-icons">border_color</i>
            Edit
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>
           <i class="material-icons">note_add</i>
            Add
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>     
         <md-menu-item>
          <md-button>
          <i class="material-icons">delete</i>
          </md-button>
        </md-menu-item>  
      </md-menu-content>
    </md-menu>
    <md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
        <i class="material-icons">settings</i> Small Menu
      </md-button>
      <md-menu-content width="2">
        <md-menu-item>
          <md-button ng-click="">
            <i class="material-icons">border_color</i>
            Edit
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button>
           <i class="material-icons">note_add</i>
            Add
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>     
         <md-menu-item>
          <md-button>
          <i class="material-icons">delete</i>
          </md-button>
        </md-menu-item>  
      </md-menu-content>
    </md-menu>

Try It On →

If you run the above example it will produce the menus with three different width.