Menus

Overview

Creating a text-based navigation menu for your designs is intuitive with the builder's menu content block. This versatile feature is compatible with various layout options and devices, sparing you the hassle of manual adjustments like text sizing and padding.

Adding a Menu

Take the following steps to add a menu to your design.

1. Drag and Drop: Drag a menu content block onto the builder stage to get started. A placeholder will appear.

2. Sidebar Settings: Access various settings for the menu block in the sidebar, which include both general and menu-specific options.

1. Add Items: Click 'Add new item' to populate your menu. Here, you can set the display text and corresponding URL. The 'Title' field allows for hover-over text for each item.

2. URL Types: The menu supports multiple URL types such as email, SMS, and click-to-call. You can also specify whether a URL should open in the same window or a new tab.

3. Reorder Items: Rearrange the menu items by dragging them using the icon in the upper left-hand corner of the item settings panel.

Designing Your Menu

Take the following steps to design your menu.

1. Customization: Utilize the sidebar settings to alter your menu's appearance. Choose between a horizontal and vertical layout through a dropdown menu.

2. Separators: If you opt for a horizontal layout, you can insert a text character as a separator between menu items. This separator will match your chosen text color.

3. Padding: Customize padding for individual menu items as well as the entire menu content block.

Mobile Menus

Take the following steps to ensure your emails are mobile-ready:

1. Client Support: Not all email clients support mobile menus. Consult the compatibility list below for details.

2. Optimization: Use the 'Mobile menus' option in the content properties for a mobile-friendly menu without content duplication.

3. Activation: Toggle on the mobile menu to unlock additional customization options. Icon and Layout: On mobile, an icon replaces the standard menu. It expands to a vertical layout when tapped, ignoring any separators you’ve set for the desktop version.

4. Design Details: Adjust the icon's size and shape, and set foreground and background colors.

Mobile Menu Compatibility

The following table displays the email client and its corresponding compatibility.

Email Client	Compatible?
Gmail iOS	No
Gmail Android	No
Outlook iOS	No
Outlook Android	No
iOS native	Yes
Yahoo iOS	No
Yahoo Android	No

Accessibility Keys for Menu Content Blocks

This section outlines and describes the accessibility keys currently available for navigating the Menu content block. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.

We are still working on developing our application's accessibility, and you may notice that some actions aren't available yet. Additional accessibility features are coming soon.

Setting Your Focus

Take the following steps to set your focus:

1. Locate the Menu Block: Navigate through the builder using ArrowUp or ArrowDown to locate the Menu content block. A high-contrast border will appear, indicating that the block is in focus.

2. Activate the Menu Block: Press Enter to activate the block in accessibility mode. This action allows for interaction with the block's properties through the sidebar but does not insert the block into the stage.

Customizing Properties

Take the following steps to customize your properties:

1. Navigating Sidebar Properties: With the Menu block activated, use Tab to navigate through the sidebar settings. These settings include general options like adding new items, setting display text, and URLs, and menu-specific options such as URL types and target actions (like opening in the same window or a new tab).

2. Adding Menu Items: Add new items to the menu by selecting Add new item, where you can set the display text and corresponding URL for each item.

3. Design Customization: Adjust the menu's appearance using sidebar options, such as choosing between horizontal and vertical layouts. If opting for a horizontal layout, you can also insert text characters as separators between menu items.

Exiting and Saving Changes

Use the following key to save and exit your design.

• To exit and save changes, press Esc. This command will deselect the Menu block and save your changes.