# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/menus.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.