docs(material/menu): add docs for context menu

Sets up a live example showing how the context menu works.

Author: crisbeto

src/components-examples/material/menu/context-menu/context-menu-example.css

@@ -0,0 +1,12 @@
+.example-context-menu-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 300px;
+  max-width: 300px;
+  border: dashed 1px;
+  text-align: center;
+  padding: 30px;
+  box-sizing: border-box;
+}

src/components-examples/material/menu/context-menu/context-menu-example.html

@@ -0,0 +1,22 @@
+<div class="example-context-menu-area" [matContextMenuTriggerFor]="contextMenu">
+  Right click here to trigger a context menu
+</div>
+
+<mat-menu #contextMenu>
+  <button mat-menu-item>
+    <mat-icon>content_cut</mat-icon>
+    Cut
+  </button>
+  <button mat-menu-item>
+    <mat-icon>content_copy</mat-icon>
+    Copy
+  </button>
+  <button mat-menu-item>
+    <mat-icon>content_paste</mat-icon>
+    Paste
+  </button>
+  <button mat-menu-item>
+    <mat-icon>print</mat-icon>
+    Print
+  </button>
+</mat-menu>

src/components-examples/material/menu/context-menu/context-menu-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatIconModule} from '@angular/material/icon';
+
+/**
+ * @title Context menu
+ */
+@Component({
+  selector: 'context-menu-example',
+  templateUrl: 'context-menu-example.html',
+  styleUrl: './context-menu-example.css',
+  imports: [MatMenuModule, MatIconModule],
+})
+export class ContextMenuExample {}

src/components-examples/material/menu/index.ts

@@ -3,3 +3,4 @@ export {MenuOverviewExample} from './menu-overview/menu-overview-example';
 export {MenuPositionExample} from './menu-position/menu-position-example';
 export {MenuNestedExample} from './menu-nested/menu-nested-example';
 export {MenuHarnessExample} from './menu-harness/menu-harness-example';
+export {ContextMenuExample} from './context-menu/context-menu-example';

src/material/menu/menu.md

@@ -49,6 +49,16 @@ that should trigger the sub-menu:
               "file": "menu-nested-example.html",
               "region": "sub-menu"}) -->
 
+### Context menu
+A context menu is menu that is triggered by right-clicking in a specific area, rather than
+clicking on a trigger element. It is re-positioned if the user right-clicks somewhere else in the
+area and will be closed if the user clicks away.
+
+You can set up a `mat-menu` as a context menu by adding the `matContextMenuTriggerFor` directive
+to your container and binding it to a menu instance.
+
+<!-- example(context-menu) -->
+
 ### Lazy rendering
 By default, the menu content will be initialized even when the panel is closed. To defer
 initialization until the menu is open, the content can be provided as an `ng-template`