docs(menu): add live example of menu position

src/lib/menu/menu.md

@@ -68,6 +68,8 @@ The position can be changed using the `xPosition` (`before | after`) and `yPosit
 </button>
 ```
 
+<!-- example(menu-position) -->
+
 ### Nested menu
 
 Material supports the ability for an `mat-menu-item` to open a sub-menu. To do so, you have to define

src/material-examples/menu-position/menu-position-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/menu-position/menu-position-example.html

@@ -0,0 +1,24 @@
+<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
+<mat-menu #aboveMenu="matMenu" yPosition="above">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
+<mat-menu #belowMenu="matMenu" yPosition="below">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
+<mat-menu #beforeMenu="matMenu" xPosition="before">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+
+<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+<mat-menu #afterMenu="matMenu" xPosition="after">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>

src/material-examples/menu-position/menu-position-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Menu positioning
+ */
+@Component({
+  selector: 'menu-position-example',
+  templateUrl: 'menu-position-example.html',
+  styleUrls: ['menu-position-example.css'],
+})
+export class MenuPositionExample {}