Vue Material -

Menu

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.

Directions

The position of the menu content is calculated based of 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:

Start and End

Alignments

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:

Trigger alignment and Offsets

Sizes

md-menu have 4 different sizes and a auto mode:

5 possible sizes
The max-width of a menu is 280px.

Rich Content and Icon Alignment

Sometimes you may need to toggle your menu dynamically. You can also show arbitrary content inside a md-menu-content, like this card example:

Open a menu programatically
A md-menu with items that have icons aligns perfectly with md-icon-button.

API - md-menu

The following options can be used with any menu:

All options of router-link can be simply used here.
NameDescriptionDefault
md-active Boolean Used to show/hide a menu programatically. 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:
  • click
  • dblclick
  • mousedown
  • mouseup
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-start" 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 -