Change log

Menus

Menus allow the easy creation and management of dynamic navigation elements. These can be rendered anywhere throughout your site, whether in content templates, pages, snippets or most other layouts.

This modular approach to site navigation allows for links to be managed from a single location and with full access to the menu Layouts you can implement any 3rd party CSS framework or Javascript plug-in for advanced Menu functionality.

Quick Start

Creating a Menu

To create a new Menu, go to ‘Content’ > ‘Menus’ and click the “ADD MENU” button at the top of the page. Set the ‘Menu Name’ and ‘Menu Alias’ (described in more detail in the Settings section below) and click “SAVE” to continue setting up your new Menu - as described in the following sections below.

Editing a Menu

To edit an existing Menu, go to ‘Content’ > ‘Menus’ and click on the Menu name or the associated pencil icon on the far right of the list view.
Further options are as described in the following sections below.

Items

Under the ‘Items’ tab you can create new items by clicking the “+ Add New Item” button.

Menu items can also be created directly under other menu items (using the items “3 dots” context menu) to create nested/multi-level menu functionality, or by simply dragging and dropping an existing item onto the desired parent item.
Drag and drop can also be used to reorder item within the menu structure.

Creating a new item, or selecting an existing item, will display all the properties available to it which you can further edit as needed.

Item Properties

Property
Liquid
Description
Item Name
{{item.itemName}}
The menu item’s descriptive name which, by default, will display as the label text in your site menu.
URL
{{item.itemUrl}}
The page address or web link your menu item is to follow when clicked.
Use the link manager (link icon) to source internal module items and pages to link to, or manually add your own internal or external link path.
Target Frame
{{item.itemTargetFrame}}
The instruction for where the URL will open to with reference to a HTML document frame. Eg; _blank, _self, _parent, _top or custom named frame.
ID
{{item.itemId}}
A unique, identifying name assigned to the item for targeting with Javascript and/or CSS.
Class
{{item.itemClass}}
A style name assigned to the item for targeting with Javascript and/or CSS.
Title
{{item.itemTitle}}
The value of the items title attribute for SEO purposes, screen-readers and other assistive technology.
Custom Attribute
{{item.itemCustomAttribute}}
Any custom attributes you may wish to add at an item level. Typically used for configuring Javascript Menu plug-ins. Here you would add the full attribute name/value pair/s, eg: data-custom-name="myCustomAttr"
Enabled
{{item.itemEnabled}}
Uncheck to disable the menu item from rendering on the front-end of your site.

Settings

Under the ‘Settings’ tab you can change the Name and Alias assign to the Menu.

Changing the Alias will result in any existing references to the previous Menu Alias breaking.

Layouts (Layout Groups)

A Layout Group provide full access to the HTML and Liquid markup of your Menu, allowing you to fully customise the layout and functionality of the menu as needed.

Menus can have any number of Layout Groups created for rendering menus on your site in different ways.

Layout Groups consist of 3 sub layouts which are responsible for the rendering process of the menu container, items and sub-items.

These Layout Groups can also be accessed via the File Manager or FTP in the /Content/MenuLayouts/<menu_alias>/ directory in the site's root.

The Default Layout Group is detailed below.

menu

You’ll notice how the ‘menu’ sub layout consists of the navigational wrapper (typically nav and/or ul elements) and sets up a Liquid forloop to call into the wrapper all of the Menu’s top level items using the ‘item’ sub layout to define how these will be rendered.

<nav class="{{this.alias}}">
	<ul>
	{% for item in this.items -%}
		{% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/item.layout" %}
	{% endfor -%}
	</ul>
</nav>

item

The ‘item’ sub layout consists of the individual item’s wrapper (typically an li element) and is where we can conditionally render the item’s attributes (such as values for href, target, title, custom attributes, etc...) via the use of Liquid tags and objects.

You’ll also notice the use of Liquid here to get the current page URL, match it against the menu item link and assign a selected class for targeting via your CSS.

{% assign isSelected = "" %}
{% if request.request_url.path == item.itemUrl %}
    {% assign isSelected = "selected" %}
{% endif -%}
<li{% if item.itemId != null %} id="{{item.itemId}}"{% endif -%}{% if item.itemClass != null or isSelected != null %} class="{{item.itemClass}} {{isSelected}}" {% endif -%}{% if item.itemCustomAttribute != null %}{{item.itemCustomAttribute}}{% endif -%}>
	<a href="{{item.itemUrl}}"{% if item.itemTargetFrame != null %} target="{{item.itemTargetFrame}}"{% endif -%} {% if item.itemTitle != "" %} title="{{item.itemTitle}}" {% endif -%}>{{item.itemName}}</a>
    {% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/sub_items.layout" %}
</li>

sub_items

The ‘sub_items’ sub layout consists of a conditional statement to only render a forloop if any sub-menu items exist for a given parent item. If so, we repeat the ‘item’ sub layout to again render the individual item and its properties and, once again any sub-menu items if present.

{% if item.items != null %}
    {% assign currentItem = item -%}
    <ul>
        {% for item in currentItem.items -%}
            {% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/item.layout" %}
        {% endfor -%}
    </ul>
{% endif -%}

Related Articles

  • Liquid Components
    menu
    This component outputs data relating to a specific Menu including all menu items and any child sub-items.

External Resources

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.

Questions?

We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.