Add docs page for menu

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 2644abf4532b0ad3fd1b17cb81acf22a83845a9b..c3bd7d5d268c47e456cb0dff60925b2ceb8b537c 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -1,6 +1,7 @@
 ---
 title: The Grid
 description: If you're familiar with the Foundation for Sites grid, you'll be right at home working with Foundation for Emails.
+sass: scss/grid/_grid.scss
 ---
 
 The grid has two core elements: the *row* and *column*. Rows define horizontal sections of content, and columns carve up the row into side-by-side sections.

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
new file mode 100644 (file)
index 0000000..73f6348
--- /dev/null
+++ b/docs/pages/menu.md
@@ -0,0 +1,47 @@
+---
+title: Menu
+description: Use the menu component to create a horizontal or vertical list of links.
+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.
+
+In Inky HTML, use the tag `<menu>` to make a menu, and the tag `<item>` to make an item.
+
+```inky
+<menu>
+  <item href="http://zurb.com">Item</item>
+  <item href="http://zurb.com">Item</item>
+  <item href="http://zurb.com">Item</item>
+</menu>
+```
+
+---
+
+## Simple 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.
+
+```inky
+<menu class="simple">
+  <item href="http://zurb.com">Item</item>
+  <item href="http://zurb.com">Item</item>
+  <item href="http://zurb.com">Item</item>
+</menu>
+```
+
+---
+
+## Vertical Menu
+
+Menus align horizontally by default. To switch to a vertical menu, add the class `.vertical` to the menu.
+
+```inky
+<menu class="vertical">
+  <item href="http://zurb.com">Item</item>
+  <item href="http://zurb.com">Item</item>
+  <item href="http://zurb.com">Item</item>
+</menu>
+```