> For the complete documentation index, see [llms.txt](https://docs.toomuchmedia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.toomuchmedia.com/content-management/member-areas-and-tours/themes/menus-and-navigation.md).

# Menus & Navigation

*Article Topics:* [*Blocks*](/getting-started/common-topics/blocks.md)*,* [*Themes*](/getting-started/common-topics/themes.md)

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.

{% embed url="<https://youtu.be/sjBUwfDocYE>" %}

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

<figure><img src="/files/5rc7WrhhQhApSthpoesf" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %}
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.&#x20;
{% endhint %}

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

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

## Managing Menu Links

{% hint style="warning" %}
**Warning**: Any updates made to a menu will **automatically apply to all blocks that use the menu.**&#x20;
{% endhint %}

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

* A Name
* A Destination&#x20;
* 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.&#x20;

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

## Editing Menu Items

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

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

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.&#x20;
* **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:
    * <pre data-overflow="wrap"><code>&#x3C;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&#x3C;title>facebook&#x3C;/title>&#x3C;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" />&#x3C;/svg>
      </code></pre>
* **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.

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

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

## Related Articles

{% content-ref url="/pages/AbD3Zbxwl6KqV5nO2zAh" %}
[Navigation Bar Block](/content-management/member-areas-and-tours/themes/block-types/navigation-bar-block.md)
{% endcontent-ref %}

{% content-ref url="/pages/BuPIAaJPLFlki2GYae3K" %}
[Navigation List Block](/content-management/member-areas-and-tours/themes/block-types/navigation-list-block.md)
{% endcontent-ref %}

{% content-ref url="/pages/7lUwaSI9yImefB8h0Fa6" %}
[Using the Page Builder](/content-management/member-areas-and-tours/customizing-your-theme/using-the-page-builder.md)
{% endcontent-ref %}