Navigation | Modyo Docs

Navigation is the fastest way to put together a list of elements to give your users easy access to the key points of your site.

In this section you find a nested list of elements, which correspond to the elements that will appear on the site when using the tag {% menu%} in Templates.

Navigation only allows three levels of depth, so you can have a main list and up to two sub-elements nested in each of the main items. By default when creating a site, Modyo includes a template and a basic menu that you can modify to your needs.

At the top of the view, you will find the publication status of the menu:

Published: This status means a widget is published and the version in the editor contains no unpublished changes.
Pending changes: You will see this status if there is already a published version, but there are pending changes to be published in your editable version.
In review: You will see this status when team review is enabled and the editable version has been submitted for review.
Approved: This status appears when Computer Review is enabled and if the item's review conditions were met. If it is in this state, your templates can now be published.

On the right side of the upper bar, you will find the latest publication date and the available actions:

Preview : Clicking this icon opens a new tab with the menu preview mode, in which you can see as if all the changes you have in your menu were published.

Attention

You can preview the changes as a user without a session, or with Modyo a session. For this, it's recommended to log in or log out of Modyo from your site before entering preview mode, because if you log out while in preview mode you might encounter security errors like x-frame-options or mixed-content, depending on your site's SSL and custom domain settings.

Warning

The menu created can be displayed on any page if and only if it is added to a page through a published template, otherwise the menu is never requested and won't appear on the page.

Differences : Clicking on this icon will take you to the diff-view, where you can compare the changes between multiple versions of your menu.

By default you will start comparing the published version with the editable version, but by using the version selectors, you can also compare previous versions as well.

Tip

Every time you publish and replace the current version, the replaced version becomes a "backup" or previous version.

By default, up to 20 backups are saved so that the twenty most recent backups can be compared, restored, and rolled back.

For more information on versioning, check out the versioning section.

Activity/Comments : Only enabled if you have team review enabled. When clicked, it displays a sidebar with the activity history and comments of the menu.

You can add comments by submitting them at the bottom of the sidebar. Next to each activity, you can click on "Show details" to show the complete information of that particular activity log.

To create a Menu, follow these steps:

From the Modyo Platform main menu, expand Channels and click Sites.
Select the site you want to add a new menu.
Click Navigation.
Click on + New Menu.
Fill in the name and identifier and click on Create.
Customize the menu by adding or editing items.
Once finished, click on Publish.

Tip

Your menu is currently public but it is not being called. You need to use a template to display the menu on the screen. Modyo offers a general-purpose snippet in Snippets, General, menu and is called in the base template using

{% snippet 'shared/general/menu' %}

For more information on how to create and publish a custom menu, see Creating a Mega Menu.

Main Actions

Save: Save all menu changes.
Send to review: Changes the menu status to "In review". In this state you can continue making changes, but each change alerts assigned reviewers via email.
Reject: Returns the status to "Pending changes" and notifies reviewers that the item was rejected.
Publish: Once the changes are approved, you can go to the publish view to review and publish changes across the site.

In the right side section, you will see a bar that changes according to the item selected in the main area. In this section are the following options:

Name: Name of the item as it appears on the site.
Associated Layout Page: Directly associate a page to this menu item with a custom URL.
URL: If you chose a custom URL in the previous item, you have different options to configure this item:
- HTTP(s): Points to an address using HTTP(s). Examples:
  - http://www.example.com
  - https://www.example.com
- Relative URL and anchor: Points to an address relative to this page or to an anchor section. Examples:
  - relative-page
  - /relative-page
  - #anchor
- Phones: Generates a link with the URI tel. Examples:
  - tel: +569-123-45678
  - tel:912345678
- SMS: Generates a link with the URI sms. Examples:
  - sms:+569-123-45678
  - sms:+569-123-45678,9-123-45678
  - sms:+569-123-45678,9-123-45678?body=hello%20there&param1=a%20value
- Email: Generates a link with the mailto URI. Examples:
  - mailto:info@example.com?subject=subject&cc=cc@example.com
Open in new tab: Enable this option to open a the menu item link in a new tab. Adds the target='blank' attribute to the menu item's HTML.
Private: Makes the selected item appear visible only when the user has an active session on the site.
Segments: If there are segments created, you can also segment this element so that users can see this menu item only when they have an active session and are also within the selected segments.

The general snippet menu can meet the basic needs of a site by displaying a menu in the form of a dropdown. The most important parts of this snippet and how it can be extended to more functionality are explained below.

The first lines encapsulated by {{ }} or {% %} belong to Liquid and are used to assign variables or start a loop to display menu information.

The following list describes the important variables for the menu:

menu: This variable takes the menu with identifier main within Modyo Platform -> Navigation.
items_to_show: Take the menu items that are visible.
active: Used to add a CSS class called active in case this item is activated.
children_to_show: If there are children of the current item, it takes the items in this variable and displays them as the second level in the menu hierarchy.

When you enter the Templates section of your site in Modyo Platform, you will be able to click on the general snippet menu to see the HTML of the menu. It looks as follows:

menu

{% assign menu = menus['main'] %}
<ul class="nav navbar-nav" role="menu" aria-label="Main menu {{responsive}}">
    {% assign items_to_show = menu.items | visible_items %}
    {% for item in items_to_show %}
    {% assign active = item.url | active_page: request.url %}
    {% assign children_to_show = item.child_items | visible_items %}
    {% if children_to_show.size > 0 %}
    <li class="nav-item nav-item-{{ item.parameterized_label }} dropdown menu-item {{ active }}" role="none">
        <a target="{{ item.target }}" rel="{{ item.target | item_rel}}" class="nav-link dropdown-toggle {% for child in children_to_show %}{% if child.url == request.url  %}active{% endif %}{% endfor %}" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown{{ item.label | replace: ' ','' | replace: 'ñ','n' | capitalize }}Button{{ responsive }}" role="menuitem">
            {{ item.label }} <span class="sr-only">dropdown</span>
        </a>
        <div class="submenu-{{ item.label | replace: ' ','' | replace: 'ñ','n' | capitalize }} dropdown-menu" aria-labelledby="dropdown{{ item.label | replace: ' ','' | replace: 'ñ','n' | capitalize }}Button{{responsive}}" aria-expanded="false">
            {% for child in children_to_show %}
            <a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="dropdown-item" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
                {{ child.label }}
            </a>
            {% endfor %}
        </div>
        {% else %}
    <li class="nav-item nav-item-{{ item.parameterized_label }} {{ active }}" role="none">
        <a target="{{ item.target }}" class="nav-link" rel="{{ item.target | item_rel}}" href="{{ item.url }}" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }} {{responsive}}">{{ item.label }}</a>
        {% endif %}
    </li>
    {% endfor %}
</ul>

Next we have a menu that also calls main, but now in the form of a list unlike the general snippet that uses a dropdown:

{% assign menu = menus['main'] %}
<ul role="menu" aria-label="Main menu">
    {% assign items_to_show = menu.items | visible_items %}
    {% for item in items_to_show %}
    {% assign children_to_show = item.child_items | visible_items %}
    <li class="nav-item" role="none">
        <a href="{{ item.url }}" target="{{ item.target }}" class="nav-link" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }}">{{ item.label }}</a>
        {% if children_to_show.size > 0 %}
        <ul>
            {% for child in children_to_show %}
            <li class="nav-item" role="none">
                <a href="{{ child.url }}" target="{{ child.target }}" class="nav-link" {% if child.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ child.label }}">{{ child.label }}</a>
                {% assign children_to_show = child.child_items | visible_items %}
                {% if children_to_show.size > 0 %}
                <ul>
                    {% for grandchild in children_to_show %}
                    <li class="nav-item" role="none">
                        <a href="{{ grandchild.url }}" target="{{ grandchild.target }}" class="nav-link" {% if grandchild.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ grandchild.label }}">{{ grandchild.label }}</a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

In order to display a three-level menu, you have to add another loop that considers whether the child items contain more items. For this, the grandchildren variable is assigned to the end of the first loop and it has to iterate over the items of the children (i.e. the grandchildren items):

{% assign menu = menus['main'] %}
<ul class="nav navbar-nav" role="menu" aria-label="Main menu {{responsive}}">
    {% assign items_to_show = menu.items | visible_items %}
    {% for item in items_to_show %}
    {% assign active = item.url | active_page: request.url %}
    {% assign children_to_show = item.child_items | visible_items %}
    {% if children_to_show.size > 0 %}
    <li class="nav-item nav-item-{{ item.parameterized_label }} dropdown menu-item {{ active }}" role="none">
        <a target="{{ item.target }}" class="nav-link dropdown-toggle {% for child in children_to_show %}{% if child.url == request.url  %}active{% endif %}{% endfor %}" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-{{forloop.index}}-Button{{ responsive }}" role="menuitem">
            {{ item.label }} <span class="sr-only">dropdown</span>
        </a>
        <div class="submenu-{{forloop.index}} dropdown-menu" aria-labelledby="dropdown-{{forloop.index}}-Button{{responsive}}" aria-expanded="false">
            {% for child in children_to_show %}
            <a href="{{ child.url }}" target="{{ child.target }}" class="dropdown-item" {% if child.url == request.url %}aria-current="page"{% endif %}>{{ child.label }}</a>
            {% assign grandchildren_to_show = child.child_items | visible_items %}
            {% if grandchildren_to_show.size > 0 %}
            <ul class="m-0 p-0">
                {% for grandchild in grandchildren_to_show %}
                <li class="list-unstyled m-0 p-0">
                    <a href="{{ grandchild.url }}" target="{{ grandchild.target }}" class="dropdown-item small" {% if grandchild.url == request.url %}aria-current="page"{% endif %}><span class="pl-2">{{ grandchild.label }}</span></a>
                </li>
                {% endfor%}
            </ul>
            {% endif %}
            {% endfor %}
        </div>
        {% else %}
    <li class="nav-item nav-item-{{ item.parameterized_label }} {{ active }}" role="none">
        <a href="{{ item.url }}" target="{{ item.target }}" class="nav-link" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }} {{responsive}}">{{ item.label }}</a>
        {% endif %}
    </li>
    {% endfor %}
</ul>

← Pages Widgets →

# Navigation

# Create a Menu

# Menu examples

# List menu

# Three-level menu