1.6 KiB
1.6 KiB
| title | description | sass |
|---|---|---|
| Menu | Use the menu component to create a horizontal or vertical list of links. | 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 <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="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
</menu>
- It's important to add an `href` attribute to your ``'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.
- 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="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
</menu>
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="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
<item href="http://zurb.com">Item</item>
</menu>