Foundation

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.

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »