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.
<menu>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
</menu><html>
<head></head>
<body>
<table class="menu">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
- 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.
<menu class="vertical">
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
</menu><html>
<head></head>
<body>
<table class="menu vertical">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>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.
<menu class="small-vertical">
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
<item href="https://zurb.com">Item</item>
</menu><html>
<head></head>
<body>
<table class="menu small-vertical">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
<th class="menu-item"><a href="https://zurb.com">Item</a></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>DEMO
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$menu-item-padding |
Length | 10px |
Padding inside a menu item. |
$menu-item-gutter |
Length | 10px |
Right-hand spacing of items in menus with the |
$menu-item-color |
Color | $primary-color |
This is the color of the menu item links. |
