Menu Overview

The menu element allows you to design a navigation menu or bar. Multiple hyperlinks can be added horizontally or vertically to resemble a navigation menu or bar. You can use the menu element to include social media or other important links (e.g., links to your website or privacy policy). You can also use the menu element to resemble your organization’s website by replicating its top menu or footer menu in the email template. This makes it easier for the email recipient to get to where they want to go faster.

How to Add the Menu Element to Your Template

To add the menu element to your email template, ensure you are in the Content section. Then, click the MENU icon and drag it onto the Email Message template. 

Properties of the Menu Element

You can choose to customize the Menu element in Desktop or Mobile mode. However, the Mobile mode does not contain all the styling options. The Mobile mode does not include the ability to:

• Add new menu items
• Select the font family
• Set the font weight as regular or bold
• Choose a text color and a link color for the menu items
• Align the text within the menu

Menu Items

The Menu Items section is where you add your URL(s) and the text to disguise the URL. You can add multiple URLs by clicking “Add New Item.” When adding a URL and its text you can choose for the URL to open on the same webpage/tab the participant is viewing or open in a new webpage/tab.

Text

The Text section allows you to modify the text of the URL. You can control the:

• Font Family: A group of fonts that have a similar look and style, used to choose how text appears
• Font Weight: Whether the font should be bold or not
• Font Size: How big or small the letters appear
• Text Color: The color of the font (if there is text or characters not linked to a URL)
• Link Color: The color of the URL or hyperlink
• Align: How text is positioned horizontally in relation to a reference point, like the left, right, center, or justified margins
• Layout: Choose to have the menu positioned horizontally or vertically
• Separator: Choose a character to separate the text or URLs from each other

Padding

Padding allows you to add spacing between the border of the menu and the content inside of it. It also allows you to add spacing between the text or URLs within the menu. Adding padding allows you to have custom spacing to separate items more clearly. In the Styles and General sections, you can toggle the “More Options” button (red) to customize how much padding is on the top, right, left, and bottom of the content within your menu.

Responsive Design

With responsive design, you can customize your emails to ensure they display properly across different devices. Menus can be tailored to display perfectly or be hidden so that they don’t display on a certain device. To customize the email for a specific device, click on the desktop icon or mobile icon, or select the Desktop or Mobile tab at the bottom left of the editor body. You can edit different aspects of the menu based on the device the recipient is using to view the email.

Under the responsive design section, you can hide the menu on a desktop or mobile device. When either "Hide on Desktop" or "Hide on Mobile" is toggled on, the menu will appear faded within the email template, making it invisible to participants depending on whether they are viewing the email on a desktop or a mobile device.