--- title: Navigation menu layouts slug: campaign/docs/navigation-menu-layouts docTags: createdAt: 2026-07-20T15:44:52.317Z --- This topic describes: - how customer support [sets up](docId\:E7FFrkqKbzSLzJeqPojQy) alternative HTML layouts - how to [select](docId\:E7FFrkqKbzSLzJeqPojQy) alternative layouts in the navigation menu - how to [edit](docId\:E7FFrkqKbzSLzJeqPojQy) alternative layouts using in-depth knowledge of HTML, CSS, and Velocity [navigation-menu-layouts.mdx](docId\:E7FFrkqKbzSLzJeqPojQy)To receive up to five alternative layouts, contact [customer support](docId\:ZWe1T3UPz3JW6_4mc76qV) to set up alternative layouts. To create HTML layouts, set up alternative layouts for mobile and text versions also. If no alternative layouts are saved for those versions, the default layout is used. :::hint{type="info"} **Note** In some cases, some text elements will not be in the order that you want. ::: ## [navigation-menu-layouts.mdx](docId\:E7FFrkqKbzSLzJeqPojQy)Selecting a layout 1. To select a default layout or up to five alternative layouts, while editing a message in the [Template Kit](docId\:jRJZaVEfgoLqt9ai1hzyD), on the left side of the preview, in the menu bar of the navigation menu, click **Navigation Menu**. ![Image: Configuration window](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/cZbW-oDfCRxUBwZPFyjJJ-20260720-145336.png "Image: Configuration window") 2. Open the **Options** tab. 3. In the **Layout** area, in the **Layout** drop-down list, select the layout you want to use. ![Image: Layout drop-down list](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_hSS75n6ac3-cAvdhLQTg-20260720-145336.png "Image: Layout drop-down list") 4. Click **Apply**. ## [navigation-menu-layouts.mdx](docId\:E7FFrkqKbzSLzJeqPojQy)Editing a layout You can edit alternative layouts but not the default layout. :::hint{type="danger"} **Warning** If you lack knowledge of HTML, CSS, and Velocity, contact [customer support](docId\:ZWe1T3UPz3JW6_4mc76qV) to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings. ::: 1. In the preview on the left, click **Settings**. 2. Open the **Navigation menu** tab. Each layout has source text fields for the desktop, mobile, and text versions. ![Image: Navigation menu tab](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/abgVBKQZIoDWvISwVhzW0-20260720-145336.png "Image: Navigation menu tab") 3. Edit the source text of the corresponding layout as needed. See [Insert content](docId\:E7FFrkqKbzSLzJeqPojQy) to learn how to retrieve and place the various content items. :::hint{type="info"} **Note** Set up alternative layouts for mobile and text versions also. If no alternative layouts are created for these versions, the default layout is used. ::: 4. Click **Apply**. ## [navigation-menu-layouts.mdx](docId\:E7FFrkqKbzSLzJeqPojQy)Inserting content Access the content of the navigation menu using Velocity variables and format the transferred content using HTML style attributes. The following Velocity variables are available: - **Status**. Information on current item paragraphs - **Present**. For using queries that check for the presence of an element - **Value**. For issuing the content **Notes for the creation of new layouts** - **Font definitions**. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design. - **Widths**. Specify a fixed width or a width in percent. You should enter a percentage because this prevents elements from sticking out of the layout. - **Danger of display errors**. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings. ### Status variables | Variable | Type | Description | | ------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $separatorDesktopEnabled | Boolean | Contains `true` if the **Show vertical separator lines in desktop version** check box in the **Content** section of the **Separator lines** tab is selected, otherwise `false`. | | $separatorDisplayVerticalInMobileVersion | Boolean | Contains `true` if the **Show vertical separator lines in mobile version** check box in the **Content** section of the **Separator lines** tab is selected , otherwise `false`. | | $separatorDisplayHorizontalInMobileVersion | Boolean | Contains `true` if the **Show horizontal separator lines in mobile version** check box in the **Content** section of the **Separator lines** tab is selected , otherwise `false`. | | $hamburgerMenuEnabled | Boolean | Contains `true` if the **Show** check box in the **General** section of the **Hamburger menu** tab is selected, otherwise `false`. | | $hamburgerMenuIconRounded | Boolean | Contains `true` if the **Rounding contours** check box in the **Icon** section of the **Hamburger menu** tab is selected, otherwise `false`. | | $navigationItemsAmountValue | Integer | Contains the number of menu items that are displayed. Menu items are only displayed if a link and either the text or the image are specified. | | $navCurrentParagraphId | Integer | Contains the ID of the respective navigation menu paragraph. This ID is particularly important for the mobile version, because the CSS classes use this ID as a suffix in the name. | ### Present Variables | Variable | Type | Description | | ------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | $item1TextPresent – $item10TextPresent | Boolean | Contains `true` if there is content for the **Text** box in the **Menu item #** area, otherwise `false`. | | $item1LinkUrlPresent – $item10LinkUrlPresent | Boolean | Contains `true` if there is content for the **URL** box in the **Menu item #** area, otherwise `false`. | | $item1ImageUrlPresent – $item10ImageUrlPresent | Boolean | Contains `true` if there is content for the **Image** box in the **Menu item #** area, otherwise `false`. | | $item1ColorPresent – $item10ColorPresent | Boolean | Contains `true` if there is content for the **Text color** box in the **Menu item #** area, otherwise `false`. | | $item1BackgroundColorPresent – $item1BackgroundColorPresen | Boolean | Contains `true` if there is content for the **Background color** box in the **Menu item #** area, otherwise `false`. | | $navigationLinkColorPresent | Boolean | Contains `true` if there is content for the **Color** box in the general settings under **Font settings** > **Menu items in the navigation menu**, otherwise `false`. | | $separatorLayoutThicknessPresent | Boolean | Contains `true` if there is content for the **Thickness** box under **Separator lines** > **Layout**, otherwise `false`. | | $separatorLayoutColorPresent | Boolean | Contains `true` if there is content for the **Color** box under **Separator lines** > **Layout**, otherwise `false`. | | $hamburgerMenuMenuBarHeadlinePresent | Boolean | Contains `true` if there is content for the **Heading** box under **Hamburger menu** > **Menu bar**, otherwise `false`. | | $hamburgerMenuMenuBarPaddingPresent | Boolean | Contains `true` if there is content for the **Padding** box under **Hamburger menu** > **Menu bar**, otherwise `false`. | | $hamburgerMenuMenuBarBackgroundColorPresent | Boolean | Contains `true` if there is content for the **Background color** box under **Hamburger menu** > **Menu bar**, otherwise `false`. | | $hamburgerMenuMenuBarImagePresent | Boolean | Contains `true` if there is content for the **Image** box under **Hamburger menu** > **Image**, otherwise `false`. | | $hamburgerMenuMenuBarImageAltTextPresent | Boolean | Contains `true` if there is content for the **Alternative text** box under **Hamburger menu** > **Image**, otherwise `false`. | | $hamburgerMenuMenuBarImageLinkPresent | Boolean | Contains `true` if there is content for the **Link** box under **Hamburger menu** > **Image**, otherwise `false`. | | $hamburgerMenuIconColorPresent | Boolean | Contains `true` if there is content for the **Color** box under **Hamburger menu** > **Icon**, otherwise `false`. | | $hamburgerMenuIconBackgroundColorPresent | Boolean | Contains `true` if there is content for the **Background color** box under **Hamburger menu** > **Icon**, otherwise `false`. | | $navigationBackgroundImageUrlPresent | Boolean | Contains `true` if there is content for the **URL** box under **Options** > **Background image**, otherwise `false`. | | $navigationItemDesktopBackgroundColorPresent | Boolean | Contains `true` if there is content for the **Background color** box under **Options** > **Menu items**, otherwise `false`. | | $navigationItemDesktopWidthPresent | Boolean | Contains `true` if there is content for the **Background color** box under **Options** > **Menu items**, otherwise `false`. | | $navigationItemDesktopPaddingPresent | Boolean | Contains `true` if there is content for the **Padding** box under **Options** > **Menu items**, otherwise `false`. | | $navigationItemMobileWidthPresent | Boolean | Contains `true` if there is content for the **Width** box under **Options** > **Menu items (mobile version)**, otherwise `false`. | | $item1DisplayInMobileVersion – $item10DisplayInMobileVersion | Boolean | Contains `true` if the **Show in mobile version** check box under **General** > **Menu item #** is selected, otherwise `false`. | ### Value-Variables | Variable | Type | Environment | Description | | -------------------------------------------------------- | ------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | $item1TextValue – $item10TextValue | String | Desktop, Mobile, Text | Contains the unformatted content of the **Text** box from the **Menu item #** area. | | $item1TextFormattedValue – $item10TextFormattedValue | String | Desktop, Mobile | Contains the formatted content of the **Text** box from the **Menu item #** area.The text is formatted using the font settings from the general settings and the text color from the menu item itself. | | $item1LinkUrlValue – $item10LinkUrlValue | String | Desktop, Mobile, Text | Contains the unformatted content of the **URL** box from the **Menu item #** area. | | $item1LinkFormattedValue – $item10LinkFormattedValue | String | Desktop, Mobile | Contains the formatted content of the **URL** box from the **Menu item #** area.The text is formatted using the font settings from the general settings and the text color from the menu item itself.**Note:** If you have uploaded an image for the menu item and positioned it to the right or left of the text, the link is displayed including text and image. | | $item1ImageUrlValue – $item10ImageUrlValue | String | Desktop, Mobile, Text | Contains the content of the **Image** box from the **Menu item #** area. | | $item1ColorValue – $item10ColorValue | String | Desktop, Mobile | Contains the content of the **Text color** box from the **Menu item #** area. | | $item1BackgroundColorValue – $item10BackgroundColorValue | String | Desktop, Mobile | Contains the content of the **Background color** box from the **Menu item #** area. | | $navigationLinkColorValue | String | Desktop, Mobile | Contains the content of the **Color** box from the general settings > **Font settings** tab > **Menu Items in the Navigation Menu** area. | | $separatorLayoutThicknessValue | String | Desktop, Mobile | Contains the content of the **Thickness** box from the **Separator lines** tab > **Layout** area. | | $separatorLayoutColorValue | String | Desktop, Mobile | Contains the content of the **Color** box from the **Separator lines** tab > **Layout** area. | | $hamburgerMenuMenuBarHeadlineValue | String | Mobile | Contains the unformatted content of the **Heading** box from the **Hamburger menu** tab > **Menu bar** area. | | $hamburgerMenuMenuBarHeadlineFormattedValue | String | Mobile | Contains the formatted content of the **Heading** box from the **Hamburger menu** tab > **Menu bar** area. | | $hamburgerMenuMenuBarPaddingValue | String | Mobile | Contains the content of the **Padding** box from the **Hamburger menu** tab > **Menu bar** area. | | $hamburgerMenuMenuBarBackgroundColorValue | String | Mobile | Contains the content of the **Background color** box from the **Hamburger menu** tab > **Menu bar** area. | | $hamburgerMenuIconPositionValue | String | Mobile | Contains the content of the **Position** box from the **Hamburger menu** tab > **Icon** area. | | $hamburgerMenuIconColorValue | String | Mobile | Contains the content of the **Color** box from the **Hamburger menu** tab > **Icon** area. | | $hamburgerMenuIconBackgroundColorValue | String | Mobile | Contains the content of the **Background color** box from the **Hamburger menu** tab > **Icon** area. | | $hamburgerMenuMenuBarImageUrlValue | String | Mobile | Contains the content of the **Image** box from the **Hamburger menu** tab > **Image** area. | | $hamburgerMenuMenuBarImageAltTextValue | String | Mobile | Contains the content of the **Alternative text** box from the **Hamburger menu** tab > **Image** area. | | $hamburgerMenuMenuBarImageLinkValue | String | Mobile | Contains the content of the **Link** box from the **Hamburger menu** tab > **Image** area. | | $navigationAlignmentValue | String | Desktop, Mobile | Contains the content of the **Alignment** box from the **Options** tab > **Layout** area. | | $navigationBackgroundImageUrlValue | String | Desktop, Mobile | Contains the content of the **Image** box from the **Options** tab > **Background image** area. | | $navigationBackgroundImageAlignmentValue | String | Desktop, Mobile | Contains the content of the **Alignment** box from the **Options** tab > **Background image** area. | | $navigationBackgroundImageRepeatValue | String | Desktop, Mobile | Contains the content of the **Repeat** box from the **Options** tab > **Background image** area. | | $navigationItemDesktopBackgroundColorValue | String | Desktop, Mobile | Contains the content of the **Background color** box from the **Options** tab > **Menu items** area. | | $navigationItemDesktopWidthValue | String | Desktop, Mobile | Contains the content of the **Width (desktop version)** box from the **Options** tab > **Menu items** area. | | $navigationItemDesktopPaddingValue | String | Desktop, Mobile | Contains the content of the **Padding** box from the **Options** tab > **Menu items** area. | | $navigationItemDesktopAlignmentValue | String | Desktop, Mobile | Contains the content of the **Text alignment** box from the **Options** tab > **Menu items** area. | | $navigationItemDesktopVerticalAlignmentValue | String | Desktop, Mobile | Contains the content of the **Text position (next to the image)** box from the **Options** tab > **Menu items** area. | | $navigationItemImageBehaviorValue | String | Desktop, Mobile | Contains the content of the **Image position** box from the **Options** tab > **Menu items** area. | | $navigationItemMobileWidthValue | String | Mobile | Contains the content of the **Width** box from the **Options** tab > **Menu items (mobile version)** area. | | $navigationItemMobileAlignmentValue | String | Mobile | Contains the content of the **Text alignment** box from the **Options** tab > **Menu items (mobile version)** area. | | $navigationItemMobileVerticalAlignmentValue | String | Mobile | Contains the content of the **Text position (next to the image)** box from the **Options** tab > **Menu items (mobile version)** area. |