updates copy and examples for menu

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index 546e7bf3da887f042e4ae93e66d1daee0ff644d1..868d446ce313870af671166559d6f1d5f4e1e412 100644 (file)
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -6,7 +6,7 @@ sass: scss/components/_menu.scss
 
 ## Basics
 
-A menu is a `<table>` with a class of `.menu` and a `<tr>` inside of it. Each link in the menu is a `<td>` with an `<a>` inside of it.
+A menu is a `<table>` with a class of `.menu` and a `<tr>` inside of it. Each link in the menu is a `<th class="menu-item">` with an `<a>` inside of it.
 
 In Inky HTML, use the tag `<menu>` to make a menu, and the tag `<item>` to make an item.
 
@@ -20,12 +20,12 @@ In Inky HTML, use the tag `<menu>` to make a menu, and the tag `<item>` to make
 
 ---
 
-## Simple Menu
+## Vertical Menu
 
-Menu items have padding around them, which in some situations will misalign your link text with another element of your design. To strip the padding from menu items, add the class `.simple` to the menu. There will still be some horizontal space between them, to space them out.
+Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu.
 
 ```inky_example
-<menu class="simple">
+<menu class="vertical">
   <item href="http://zurb.com">Item</item>
   <item href="http://zurb.com">Item</item>
   <item href="http://zurb.com">Item</item>
@@ -34,14 +34,14 @@ Menu items have padding around them, which in some situations will misalign your
 
 ---
 
-## Vertical Menu
+## Vertical Menu on the Small Breakpoint
 
-Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu.
+Menus align horizontally by default. To switch to a vertical menu on the small breakpoint only, add the class `.small-vertical` to the menu. This works well because the email clients that support media queries fall into the small breakpoint like iPhones and Android 4.4.
 
 ```inky_example
-<menu class="vertical">
+<menu class="small-vertical">
   <item href="http://zurb.com">Item</item>
   <item href="http://zurb.com">Item</item>
   <item href="http://zurb.com">Item</item>
 </menu>
-```
+```
\ No newline at end of file

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 6ea8880ab6d14148ca0c525e7127c33e8a181422..896e66e24bb241ab680d5b7d0e0e4a63898e25cb 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -25,6 +25,7 @@
   <li><a href="callout.html">Callout</a></li>
   <li><a href="global.html">Global Styles</a></li>
   <li><a href="grid.html">Grid</a></li>
+  <li><a href="menu.html">Menu</a></li>
   <li><a href="spacer.html">Spacer</a></li>
   <li><a href="wrapper.html">Wrapper</a></li>
   <!-- <li><a href="thumbnail.html">Thumbnail</a></li> -->