Foundation
Jump to Nav

Menu

Use the menu component to create a horizontal or vertical list of links.


Basics

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.

HTML
<menu>
  <item href="http://zurb.com">Item</item>
  <item href="http://zurb.com">Item</item>
  <item href="http://zurb.com">Item</item>
</menu>
<table class="menu">
  <tr>
    <td>
      <table>
        <tr>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO

- It's important to add an href attribute to your <item>'s to ensure that Outlook.com will not display [undefined] in your rendered email.
- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.

Vertical Menu

Menus align horizontally by default. To switch to a vertical menu, add the class .vertical to the menu.

HTML
<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>
<table class="menu vertical">
  <tr>
    <td>
      <table>
        <tr>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO


Vertical Menu on the Small Breakpoint

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.

HTML
<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>
<table class="menu small-vertical">
  <tr>
    <td>
      <table>
        <tr>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
          <th class="menu-item"><a href="http://zurb.com">Item</a></th>
        </tr>
      </table>
    </td>
  </tr>
</table>

DEMO


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$menu-item-padding Length 10px

Padding inside a menu item.

$menu-item-gutter Length 10px

Right-hand spacing of items in menus with the .simple class.

$menu-item-color Color $primary-color

This is the color of the menu item links.