Menus & Navigation

Article Topics: Blocks, Themes

Menus are used to define sets of links that can be applied across various Navigation Blocks, such as the Navigation Bar Block and the Navigation List Block. While Navigation Blocks control layout and design, Menus handle what links appear and where they go.

This article explains how to create, manage, and connect Menus to your Navigation Blocks for a frictionless browsing experience.

Accessing Menus

To manage Menus within a Theme:

1. Go to Content Management in the left-hand navigation.

2. Select either Tour or Member Area, depending on where the theme is located.

3. Click the Theme tab.

4. Open the Menus subtab on the left-hand side.

Once here, you can view and edit existing menus, add a new menu, or delete a menu.

TMM Tip: When creating a new menu, give it a distinct and/or descriptive name since this is what will appear when choosing a menu from a Navigation Block.

How Menus work with Navigation Blocks

First, a Theme Menu is a list of links that can be connected to various navigation blocks. For example, you may have a "Top Page Navigation" menu used by the Navigation Bar Block on your homepage. When selecting a menu within a Navigation Bar or Navigation List Block, that block will display the selected menu's links.

Managing Menu Links

Warning: Any updates made to a menu will automatically apply to all blocks that use the menu.

Clicking a Menu opens a list of individual links called Menu Items. Each link contains:

• A Name

• A Destination

• Page Path

• Link Type

• Settings to Disable, Delete, Copy, or Edit a link.

Reordering Links can be done by either using the up/down arrows or dragging and dropping them.

Editing Menu Items

Clicking the "Edit" button to the right of the Link displays a modal to modify the link's details.

The following details for each Menu Item can be modified:

• Item Title: The text displayed for the link in the Navigation Block.

• Status: Select between Disabled and Enabled to show or not show the link.

• Link Type: Choose whether it's a link to a CMS page, a search box, a Static URL, a Join Form, or more.

  • Depending on the selected type, additional fields will appear for fine-tuning the behavior of the link.

• Page: Select a page in the Theme to send users to.

• Additional URL Parameters: Add additional parameters to be used in the URL.

• Href Target: Choose whether to open the link in a new tab or in the same tab.

• Text/Icon Display: Choose between the following

  • Displaying the title of the menu item using the Item Title.

  • Displaying an Icon using the SVG Icon.

  • A combination of both Text and Icon using the Item Title and SVG Icon.

• SVG Icon: Text area for including the full SVG code for your vector icon.

  • Example:

    • <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>facebook</title><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /></svg>

• Element ID: A custom ID to be used with Custom CSS.

• Element Class: A custom Class to be used with Custom CSS.

Sub-menus

Menu items can be placed under another menu item to create sub-menus, allowing the user to click to reveal additional links. Drag and drop a child item underneath its parent to enable click-to-reveal functionality.

Related Articles

Navigation Bar BlockNavigation List BlockUsing the Page Builder