Acorn Email Framework

Menus for HTML email

Acorn comes with navigation components that make it easy to add menus to your emails.

Basic

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 creating an email header module by using a logo in the left column, and floating the menu to the right, for desktops and tablets. On mobile, everything gets centered:

Hamburger

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.

Reverse 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:

CSS Reset

The nav-sm-vertical class may be used on the main table in order to stack menu items, instead of displaying them inline one after the other. Here is the CSS that is applied to vertical navs on mobile:

.nav-sm-vertical .nav-item {display: block;}
.nav-sm-vertical .nav-item a {display: inline-block; padding: 4px 0!important;}

Shared Styles

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:

.toggle-content {
  max-height: 0;
  overflow: auto;
  transition: max-height .4s linear;
  -webkit-transition: max-height .4s linear;
}
.toggle-trigger:hover + .toggle-content,
.toggle-content:hover {max-height: 999px!important;}

Hamburger in Gmail Apps

The Hamburger Navigation doesn't work in Gmail iOS, and in some edge cases with Gmail on Android.

You can use the following CSS after the navigation CSS ↑ in order to "reset" it to a Basic navigation only for Gmail Apps:

u ~ div .toggle-trigger {display: none!important;}
u ~ div .toggle-content {max-height: none;}
u ~ div .nav-item {display: inline-block!important; padding: 0 10px!important;}
u ~ div .nav-sm-vertical .nav-item {display: block!important;}

← Labels

Pricing Table →