Responsive menus for your emails

Sartre Email comes with Navigation sections that make it easy to add HTML menus to your emails.

There are two types:

Basic
Hamburger

Each with the following variations:

Centered
Left Aligned
Right Aligned

Basic

Simple table structure, where each menu item is a table cell that contains an anchor tag.

Navigation Basic Centered

Hamburger

The Hamburger Navigation looks similar to the Basic one on desktop, but on mobile its items are hidden and a menu icon is shown instead. Touching the icon reveals the menu items.

Note

Gmail doesn't support the hamburger navigation. Sarte Email forces the Hamburger navigation to a Basic navigation, for this email client.

Customisation

Text & Links

Text and link can be customised with inline CSS:

<a href="http://example.com" style="color: #000000; font-size: 12px;">Menu item</a>

Spacing

Each nav-item uses horizontal padding. For mobile, the mobile spacing helpers in Acorn are being used:

<td class="nav-item webfont px-sm-8" style="padding-right: 24px; display: inline-block;">
    [...]
</td>

Navigation sections don't use top and bottom spacing. You can add a Spacing section above and below them.

← Interactive

Notification →