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:
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.
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.
The interactive touch-to-reveal Hamburger menu has been tested to work in the following mobile email clients:
|Gmail Android App|
|Outlook Android App|
|iPhone 6, 6+|
|iPhone 7, 7+|
|Outlook iOS App|
|Apple Mail 8|
|Apple Mail 9|
|Apple Mail 10|
|Common Web Clients*|
* When the window is resized, these clients trigger the mobile breakpoint, and hovering over the menu icon will reveal the menu.