Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line.
You can create menus with selection items or show rich content.
You will need an element with the md-menu-trigger attribute inside the menu or to use the menu core methods, like on the last example.
Bottom Right
My Item 1
My Item 2
My Item 3
Bottom Left
My Item 1
My Item 2
My Item 3
My Item 4
Top Left
My Item 1
My Item 2
My Item 3
Top Right
My Item 1
My Item 2
My Item 3
<md-menu>
<md-button md-menu-trigger>Bottom Right</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-direction="bottom left">
<md-button md-menu-trigger>Bottom Left</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item disabled>My Item 3</md-menu-item>
<md-menu-item>My Item 4</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-direction="top left">
<md-button md-menu-trigger>Top Left</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-direction="top right">
<md-button md-menu-trigger>Top Right</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
Default
My Item 1
My Item 2
My Item 3
Align trigger
My Item 1
My Item 2
My Item 3
Custom offset
My Item 1
My Item 2
My Item 3
<md-menu>
<md-button md-menu-trigger>Default</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-align-trigger>
<md-button md-menu-trigger>Align trigger</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu :md-offset-x="154" md-offset-y="12">
<md-button md-menu-trigger>Custom offset</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
Size 1
Item 1
Item 2
Item 3
Size 2
My Item 1
My Item 2
My Item 3
Size 3
My Item 1
My Item 2
My Item 3
Size 4
My Item 1
My Item 2
My Item 3
Size 5
My Item 1
My Item 2
My Item 3
Size 6
My Item 1
My Item 2
My Item 3
Size 7
My Item 1
My Item 2
My Item 3
<md-menu md-size="1">
<md-button md-menu-trigger>Size 1</md-button>
<md-menu-content>
<md-menu-item>Item 1</md-menu-item>
<md-menu-item>Item 2</md-menu-item>
<md-menu-item>Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-size="2">
<md-button md-menu-trigger>Size 2</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-size="3">
<md-button md-menu-trigger>Size 3</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-size="4">
<md-button md-menu-trigger>Size 4</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-size="5">
<md-button md-menu-trigger>Size 5</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-size="6">
<md-button md-menu-trigger>Size 6</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-size="7">
<md-button md-menu-trigger>Size 7</md-button>
<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
contacts
phone
phone
My Item 1
phone
My Item 2
phone
My Item 3
near_me
Find on map
near_me
Call
phone
Open contact card
<md-menu md-size="4" md-direction="top right" ref="menu">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>contacts</md-icon>
</md-button>
<md-menu-content>
<div class="author-card">
<md-avatar class="md-large">
<img src="assets/marcosmoura.jpg" alt="Marcos Moura">
</md-avatar>
<div class="author-card-info">
<span>Marcos Moura</span>
<div class="author-card-links">
<a href="https://linkedin.com/in/marcosvmmoura" target="_blank" rel="noopener">Linkedin</a>
<a href="https://github.com/marcosmoura" target="_blank" rel="noopener">GitHub</a>
</div>
</div>
</div>
</md-menu-content>
</md-menu>
<md-menu md-size="4">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>phone</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-icon>phone</md-icon>
<span>My Item 1</span>
</md-menu-item>
<md-menu-item>
<md-icon>phone</md-icon>
<span>My Item 2</span>
</md-menu-item>
<md-menu-item>
<md-icon>phone</md-icon>
<span>My Item 3</span>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-menu md-direction="bottom left" md-size="4">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>near_me</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<span>Find on map</span>
<md-icon>near_me</md-icon>
</md-menu-item>
<md-menu-item>
<span>Call</span>
<md-icon>phone</md-icon>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-button class="md-raised md-primary" @click.native="$refs.menu.open">Open contact card</md-button>
.author-card {
padding: 8px 16px;
display: flex;
align-items: center;
.md-avatar {
margin-right: 16px;
}
.author-card-info {
display: flex;
flex-flow: column;
flex: 1;
}
span {
font-size: 16px;
}
.author-card-links {
display: flex;
a + a {
margin-left: 8px;
}
}
}
