Menus for HTML email
Acorn comes with navigation components that make it easy to add menus to your emails.
The Basic Navigation is a simple table structure, where each menu item is a table cell that contains an anchor tag.
All menu items except the last one have 24px right padding. Depending on where you place the menu, you might need to adjust this in order to accomodate more menu items.
Menus can also be centered by using the
align-sm-center class on the main table. In this example, we are floating the menu to the right for desktops and tablets. For mobile, everything gets centered:
Acorn also includes an awesome interactive menu, usually referred to as a "hamburger menu".
It looks the same as the Basic Nav on desktop and tablets, but for mobile the nav items are hidden and you can reveal them by tapping on a menu icon. The menu icon is a fluid retina image that is hidden for desktop clients and shown on mobile with a responsive display utility class.
The hamburger navigation uses a
:hover technique, no inputs. So you can safely use it with email service providers that don't allow form elements in your emails. Like MailChimp.
In desktop email clients that support media queries and have a narrow-enough viewport in order to trigger the responsive layout, hovering the menu icon will also reveal the menu items.
You can use the Reverse Stack responsive utilities to define a custom menu item order. In the following example, we are reversing the menu items order on mobile, for a vertical mobile menu:
If you need a reversed horizontal menu instead, simply use the responsive alignment utilities on the nav items. In this example, we also remove the
full-width-sm classes, in order to better center the menu:
Navigation components in Acorn reset menu items on mobile to only have 10px side padding. The
nav-sm-vertical class can be used on the main table in order to stack menu items, instead of displaying them inline one after the other:
Navigation shares interactivity-related CSS with the Accordion. If you're not using any of these components in your emails, you can safely remove the styles that start with
.toggle-, from the CSS inside the @media query:
The Hamburger Navigation doesn't work in Gmail iOS and in some edge cases with Gmail on Android. Add the following CSS after the navigation CSS ↑ in order to "reset" it to a Basic navigation only for Gmail Apps:
Do keep in mind that this will reset it in all Gmail apps, even where the Hamburger navigation actually works.