Navigation

Navigation

Menus for HTML email

Pine comes with menu components that make it easy to add navigation to your emails.

There are two types of menus:

  • Basic
  • Hamburger


Basic Menu

The Basic Menu is a simple table structure that makes it easy to add as many menu items as you need.

It's 100% wide, so you can place it anywhere you like.
All menu items except the last one have a 40px 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 mobile-center class on the menu table.

Tip: Menus need some CSS for mobile, which comes included in the default layout from Pine. If you don't use menus at all in your email, you can safely delete the associated styles.

Hamburger Menu

Pine also includes an awesome interactive menu, usually referred to as a "hamburger menu".

The Hamburger Menu looks and works different only for mobile: the items get hidden and you can reveal them by tapping on a menu icon. The menu icon is an image, so make sure you don't forget to update its src.

This menu 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 responsive design, hovering the menu icon will also reveal the menu items, as you can see in the demo below.


Hamburger menu compatibility

The interactive touch-to-reveal Hamburger menu has been tested to work in the following mobile email clients:

Email Client Compatible
Android
Android 4.4.*
Gmail Android App
Outlook Android App
iOS
iPhone 5
iPhone 6, 6+
iPhone 7, 7+
Outlook iOS App
Apple Mail*
Apple Mail 8
Apple Mail 9
Apple Mail 10
Common Web Clients*
Gmail

* When the window is resized, these clients trigger the mobile breakpoint, and hovering over the menu icon will reveal the menu.

Theme Mountain

Current Version