diff --git a/docs/src/pages/components/Menu.vue b/docs/src/pages/components/Menu.vue
index 0b68c8a..7dfcc82 100644
--- a/docs/src/pages/components/Menu.vue
+++ b/docs/src/pages/components/Menu.vue
@@ -163,7 +163,165 @@
     </div>
 
     <div slot="code">
+      <demo-example label="Directions">
+&lt;md-menu&gt;
+  &lt;md-button md-menu-trigger&gt;Bottom Right&lt;/md-button&gt;
 
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+
+&lt;md-menu md-direction=&quot;bottom left&quot;&gt;
+  &lt;md-button md-menu-trigger&gt;Bottom Left&lt;/md-button&gt;
+
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+    &lt;md-menu-item disabled&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 4&lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+
+&lt;md-menu md-direction=&quot;top left&quot;&gt;
+  &lt;md-button md-menu-trigger&gt;Top Left&lt;/md-button&gt;
+
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+
+&lt;md-menu md-direction=&quot;top right&quot;&gt;
+  &lt;md-button md-menu-trigger&gt;Top Right&lt;/md-button&gt;
+
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+      </demo-example>
+
+      <demo-example label="Sizes">
+  &lt;md-menu&gt;
+    &lt;md-button md-menu-trigger&gt;Default&lt;/md-button&gt;
+
+    &lt;md-menu-content&gt;
+      &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;/md-menu-content&gt;
+  &lt;/md-menu&gt;
+
+  &lt;md-menu md-size=&quot;1&quot;&gt;
+    &lt;md-button md-menu-trigger&gt;Size 1&lt;/md-button&gt;
+
+    &lt;md-menu-content&gt;
+      &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;/md-menu-content&gt;
+  &lt;/md-menu&gt;
+
+  &lt;md-menu md-size=&quot;2&quot;&gt;
+    &lt;md-button md-menu-trigger&gt;Size 2&lt;/md-button&gt;
+
+    &lt;md-menu-content&gt;
+      &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;/md-menu-content&gt;
+  &lt;/md-menu&gt;
+
+  &lt;md-menu md-size=&quot;4&quot;&gt;
+    &lt;md-button md-menu-trigger&gt;Size 4&lt;/md-button&gt;
+
+    &lt;md-menu-content&gt;
+      &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;/md-menu-content&gt;
+  &lt;/md-menu&gt;
+
+  &lt;md-menu md-size=&quot;5&quot;&gt;
+    &lt;md-button md-menu-trigger&gt;Size 5&lt;/md-button&gt;
+
+    &lt;md-menu-content&gt;
+      &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;/md-menu-content&gt;
+  &lt;/md-menu&gt;
+
+  &lt;md-menu md-size=&quot;7&quot;&gt;
+    &lt;md-button md-menu-trigger&gt;Size 7&lt;/md-button&gt;
+
+    &lt;md-menu-content&gt;
+      &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+      &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+    &lt;/md-menu-content&gt;
+  &lt;/md-menu&gt;
+      </demo-example>
+
+      <demo-example label="List Icons">
+&lt;md-menu&gt;
+  &lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
+    &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
+    &lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+
+&lt;md-menu md-size=&quot;4&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
+    &lt;md-icon&gt;phone&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;
+      &lt;md-icon&gt;phone&lt;/md-icon&gt;
+      &lt;span&gt;My Item 1&lt;/span&gt;
+    &lt;/md-menu-item&gt;
+
+    &lt;md-menu-item&gt;
+      &lt;md-icon&gt;phone&lt;/md-icon&gt;
+      &lt;span&gt;My Item 2&lt;/span&gt;
+    &lt;/md-menu-item&gt;
+
+    &lt;md-menu-item&gt;
+      &lt;md-icon&gt;phone&lt;/md-icon&gt;
+      &lt;span&gt;My Item 3&lt;/span&gt;
+    &lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+
+&lt;md-menu md-direction=&quot;bottom left&quot; md-size=&quot;4&quot;&gt;
+  &lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
+    &lt;md-icon&gt;near_me&lt;/md-icon&gt;
+  &lt;/md-button&gt;
+
+  &lt;md-menu-content&gt;
+    &lt;md-menu-item&gt;
+      &lt;span&gt;Find on map&lt;/span&gt;
+      &lt;md-icon&gt;near_me&lt;/md-icon&gt;
+    &lt;/md-menu-item&gt;
+
+    &lt;md-menu-item&gt;
+      &lt;span&gt;Call&lt;/span&gt;
+      &lt;md-icon&gt;phone&lt;/md-icon&gt;
+    &lt;/md-menu-item&gt;
+  &lt;/md-menu-content&gt;
+&lt;/md-menu&gt;
+      </demo-example>
     </div>
 
     <div slot="api">