Menus appear upon interaction with a button, action, or other control. They usually display a list of choices, with one choice per line, but can also show a rich content.
The md-menu component consists of a parent md-menu, a trigger md-menu-trigger, a content holder md-menu-content and optional items md-menu-item.
The position of the menu content is calculated based on the contraints of the trigger element. Based on this you can set a position using X and Y axis.
You can combine top/bottom with start/end:
Sometimes the default position is not what we want. Maybe we need to show a menu in another location, and to achieve that you can use trigger alignment or custom offsets:
md-menu has 4 different sizes and an auto mode:
md-menu can be auto closed on click or select:
Sometimes you may need to toggle your menu dynamically. You can also show arbitrary content inside a md-menu-content, like this card example:
md-menu with items that have icons aligns perfectly with md-icon-button.The following options can be used with any menu:
router-link can be simply used here.| Name | Description | Default |
|---|---|---|
| md-active Boolean | Used to show/hide a menu programatically. | false |
| md-close-on-click Boolean | When this options is true, the menu will be closed after any click event. | false |
| md-close-on-select Boolean |
When this options is true, the menu will close after a click on a md-menu-item. This will only work if the menu have one of the events below:
| true |
| md-direction String | Set the direction of a menu. See below the detailed description of each direction. | bottom-start |
| md-direction="bottom-start" String | Aligns the menu on the bottom left of the trigger | - |
| md-direction="bottom-end" String | Aligns the menu on the bottom right of the trigger | - |
| md-direction="top-start" String | Aligns the menu on the top left of the trigger | - |
| md-direction="top-end" String | Aligns the menu on the top right of the trigger | - |
| md-align-trigger Boolean | Aligns the content above the trigger. Also works in combination with md-direction values | false |
| md-offset-x Number | Sets a custom offset in X axis | 0 |
| md-offset-y Number | Sets a custom offset in Y axis | 0 |
| md-size String | Sets the size of a menu. See below the detailed description of each size. | small |
| md-size="small" String | Sets a menu with a small size (112px) | - |
| md-size="medium" String | Sets a menu with a medium size (168px) | - |
| md-size="big" String | Sets a menu with a big size (224px) | - |
| md-size="huge" String | Sets a menu with a huge size (280px) | - |
| md-size="auto" String | Sets a menu with a auto size | - |