> For the complete documentation index, see [llms.txt](https://userflux.gitbook.io/userflux-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/menus.md).

# Menus

The "Menu" element allows you to create a list of clickable links, typically used for navigation within your email, such as in a header or footer. This guide explains how to add, configure, and style menu items.

### Adding a Menu Element

1. **Access the Content Tab:** Ensure the **Content** tab is selected in the right-hand sidebar.
2. **Drag and Drop:** Locate the "Menu" element in the sidebar. Click and drag it onto a suitable column or content area within your email canvas.

   Upon dropping, a placeholder menu (often with a single default item like "Menu" or "Page") will appear on the canvas. Its properties will load in the right-hand sidebar under the "Content" tab, specifically for "Menu Items" and "Styles."

<figure><img src="/files/zSmVdc4dmsrBdOLaeFRg" alt=""><figcaption></figcaption></figure>

### Configuring Menu Items

The "Menu Items" section in the sidebar is where you define each link in your menu.

1. **Default Item:** A new menu usually starts with one default item.
   * **Label:** This is the visible text for the menu link (e.g., "Page," changed to "Item 1"). Edit this in the "Label" field.
   * **Action Type:** Select what happens when the item is clicked. Common options:
     * `Open Website` (Default): Links to an external URL.
     * `Send Email`: Creates a `mailto:` link.
     * `Call Phone Number`: Creates a `tel:` link.
     * `Send SMS`: Creates an `sms:` link.
   * **URL/Link Details:** Based on the "Action Type," fill in the necessary details:
     * For `Open Website`: Enter the full URL in the "URL" field and select a "Target" (`Same Tab` or `New Tab`).
     * For `Send Email`: Fill in "Mail To" (email address), "Subject," and "Body."
     * For `Call Phone Number`: Enter the phone number in the "Phone" field (including country code, e.g., `+6410528335`).
2. **Adding New Items:**
   * Click the **Add New Item** button located below the list of current menu items.
   * A new item block will appear in the list, ready for you to configure its "Label," "Action Type," and associated details as described above.
3. **Reordering and Deleting Items:**
   * **Reorder:** Look for drag handles (often a set of dots or lines) next to each menu item in the sidebar. Click and drag these to change the order of items.
   * **Delete:** Each menu item block in the sidebar typically has a delete icon (trash can) to remove it.

<div align="left"><figure><img src="/files/WDQpPxm9mODsMjxYcdjP" alt="" width="335"><figcaption></figcaption></figure></div>

### Styling the Menu

The "Styles" section in the sidebar controls the overall appearance of the menu.

* **Font Family:** Select a font for all menu item text (e.g., "Arial Black").
* **Font Weight:** Choose the font weight (e.g., "Regular," "Bold" - "Bold" selected in video).
* **Font Size:** Adjust the size of the menu item text in pixels (e.g., default `14px`, increased to `20px`).
* **Letter Spacing:** Control the spacing between characters in the menu item text (e.g., `0px`).
* **Text Colour:** Select the default colour for the menu item text using the color picker.
* **Link Colour:** Select the colour specifically for the linked text. This might override "Text Colour" if the items are links.
* **Align:** Choose the horizontal alignment of the menu items within their container:
  * `Left`
  * `Center` (Default)
  * `Right`
* **Layout:**
  * `Horizontal` (Default): Menu items are arranged in a row.
  * `Vertical`: Menu items are stacked one below the other. (Video shows switching to "Vertical").
* **Separator:** If you want a character to separate horizontal menu items, enter it here (e.g., `|`, `-`). This is only applicable when "Layout" is "Horizontal."
* **Padding (Internal):** This padding applies to the space *between* the menu items or around each item if laid out vertically.
  * **All Sides / More Options:** Set padding values (e.g., "All Sides" changed from `5px` to `15px` in the video for vertical layout, adjusting the space between stacked items).

<div align="left"><figure><img src="/files/gm65cQIiwtas8D0T6ce0" alt="" width="340"><figcaption></figcaption></figure></div>

#### General&#x20;

Controls the padding around the entire menu block.

* **Container Padding:**
  * **All Sides:** Apply equal padding (e.g., default `10px`, increased to `21px`).
  * **More Options:** For individual side padding.

<div align="left"><figure><img src="/files/E1hGF3bBiFfO1ssgHuxW" alt="" width="329"><figcaption></figcaption></figure></div>

#### Responsive Design

Manage visibility on different devices.

* **Hide on Desktop:** Toggle on to hide the menu on desktops.

<div align="left"><figure><img src="/files/jsu7XHhCd75zFbzsKzgk" alt="" width="339"><figcaption></figcaption></figure></div>