Change log

menu

This component outputs data relating to a specific Menu.

{% component type: "menu", alias: "<menu_alias>" %}

Parameters and Options

Parameter
Values
Required
Description
type
menu

This is the name of the entity that needs to be used for the component retrieving function.

alias
<alias_name>
The alias name of the module.
layoutGroup
Default (default)
<Your Layout Group>
-
The layout group name you want to use for rendering the component. The layout group name is referenced from the available Layout Groups of the alias specified. If the parameter is blank or has an incorrect referenced Layout Group then the component will use the system 'Default' Layout Group.
collectionVariable
<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.
If using this parameter, the module will not render its layout.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

<customParameter>
<your custom value>

You can add your own additional parameters (name/value pairs) to the Component tag. These will be passed to the Components Layout (and the collectionVariable if used) for use via Liquid.

Your <customParameter> name must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

You can use HTML as the value here, just be sure to change any double quotes in your HTML to single quotes.

Liquid Output

The below menu example includes 3 top level menu items with 2 sub menu items and represents the typical data structure you will see from this Component.

{
  "Name": "DEMO Menu Example",
  "LayoutGroup": "Default",
  "Alias": "demo_menu_example",
  "Items": [
  {
    "id": 388,
    "ItemId": null,
    "ItemName": "Menu Item 1",
    "ItemUrl": "#",
    "ItemTargetFrame": null,
    "ItemClass": null,
    "ItemTitle": null,
    "ItemCustomAttribute": null,
    "ItemEnabled": true,
    "children": [],
    "Items": []
  },
  {
    "id": 946,
    "ItemId": null,
    "ItemName": "Menu Item 2",
    "ItemUrl": "/demo-cs/basic-menu-example",
    "ItemTargetFrame": null,
    "ItemClass": null,
    "ItemTitle": null,
    "ItemCustomAttribute": null,
    "ItemEnabled": true,
    "children": [],
    "Items": []
  },
  {
    "id": 796,
    "ItemId": null,
    "ItemName": "Menu Item 3",
    "ItemUrl": "#",
    "ItemTargetFrame": null,
    "ItemClass": null,
    "ItemTitle": null,
    "ItemCustomAttribute": null,
    "ItemEnabled": true,
    "children": [
      {
        "id": 196,
        "ItemId": null,
        "ItemName": "Sub Menu Item 1",
        "ItemUrl": "#",
        "ItemTargetFrame": null,
        "ItemClass": null,
        "ItemTitle": null,
        "ItemCustomAttribute": null,
        "ItemEnabled": true,
        "children": []
      },
      {
        "id": 263,
        "ItemId": null,
        "ItemName": "Sub Menu Item 2",
        "ItemUrl": "#",
        "ItemTargetFrame": null,
        "ItemClass": null,
        "ItemTitle": null,
        "ItemCustomAttribute": null,
        "ItemEnabled": true,
        "children": []
      }
    ],
    "Items": [
      {
        "id": 196,
        "ItemId": null,
        "ItemName": "Sub Menu Item 1",
        "ItemUrl": "#",
        "ItemTargetFrame": null,
        "ItemClass": null,
        "ItemTitle": null,
        "ItemCustomAttribute": null,
        "ItemEnabled": true,
        "children": [],
        "Items": []
      },
      {
        "id": 263,
        "ItemId": null,
        "ItemName": "Sub Menu Item 2",
        "ItemUrl": "#",
        "ItemTargetFrame": null,
        "ItemClass": null,
        "ItemTitle": null,
        "ItemCustomAttribute": null,
        "ItemEnabled": true,
        "children": [],
        "Items": []
      }
    ]
  }
],
  "Parent": {
  "Id": 1957,
  "Url": "/component-types/menu",
  "ParentId": 2127,
  "LastUpdatedDate": "2020-09-21T23:43:58",
  "Name": "menu",
  "UrlSlug": "menu",
  "Enabled": true,
  "ReleaseDate": "2018-08-03T00:00:00",
  "ExpiryDate": "2099-11-28T00:00:00",
  "Weighting": 1010,
  "Description": "<p>This component outputs data relating to a specific Menu.</p>\r\n\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n{% component type: \"snippet\", alias: \"section_parameters\" %}\r\n\r\n{% component type: \"json\", source_type:\"string\", source:\"{{tabularData}}\", layout:\"/snippets/tabularJSON.layout\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_output\" %}\r\n\r\n<p>The below menu example includes 3 top level menu items with 2 sub menu items and represents the typical data structure you will see from this Component.</p>\r\n\r\n{% component type: \"menu\", alias: \"demo_menu_example\", collectionVariable: \"menuExample\" %}\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{menuExample}}\", lang: \"json\" %}\r\n</section>\r\n\r\n{% component type: \"snippet\", alias: \"section_accessing_data\" %}\r\n\r\n<p>As an alternative, you can instead output the menu data directly on the Page or Template via a Liquid Collection if <code>collectionVariable</code> was added to the Component tag.</p>\r\n\r\n<p>An example using <code>collectionVariable</code> with value \"menuData\" is as follows:</p>\r\n\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n<p><em>Looping through the collection to render all the top level item names in a list:</em></p>\r\n\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n<p><em>Now, testing for sub menu items and nesting them in the list:</em></p>\r\n\r\n\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n\r\n\r\n<p><em>Accessing a specific item within the collection. In this case the third menu item name (zero based index):</em></p>\r\n\r\n\r\n\r\n{% component type: \"snippet\", alias: \"code_block_processor\", data: \"{{data}}\", lang: \"liquid\" %}\r\n</section>\r\n\r\n",
  "ItemTags": [
  "Menus"
],
  "Author_Name": "",
  "Author_Url": "",
  "Author": "",
  "SEOTitle": "",
  "MetaTitle": "",
  "MetaDescription": "",
  "ShowPageForSearchEngine": true,
  "CanonicalLink": "",
  "EnableAMP": false,
  "AMPContent": "",
  "CodeEditor": true,
  "ExternalId": 0,
  "SocialMetaTags": "",
  "OpenGraphProperties": "",
  "DisableForSiteSearch": false,
  "SeoPriority": "",
  "CreatedByMemberId": 0,
  "ItemCategories": "",
  "ItemCategoryIdList": "",
  "SKUCode": "",
  "SiteSearchKeywords": "",
  "Active": true,
  "IgnoreUpdates": true,
  "UpdateNotes": "",
  "UpdatesLog": "<ul><li>Added 'layoutGroup' parameter</li></ul>",
  "ExternalResources": "<ul><li><a href=\"/demo-cs/basic-menu-example\" rel=\"noopener noreferrer\" target=\"_blank\">Basic Menu Example</a></li></ul>",
  "AdditionalRelatedArticle_Name": "",
  "AdditionalRelatedArticle_Url": "",
  "AdditionalRelatedArticle": "",
  "AdditionalRelatedArticle2_Name": "",
  "AdditionalRelatedArticle2_Url": "",
  "AdditionalRelatedArticle2": "",
  "Authors": "2418",
  "Module_ID": 1870,
  "Module_Alias": "DocumentationPost",
  "ParentName": "Liquid Components",
  "ParentUrl": "/component-types",
  "TemplateName": "Docs Template",
  "IsHome": false
},
  "Params": {}
}

Accessing the Data

As an alternative, you can instead output the menu data directly on the Page or Template via a Liquid Collection if collectionVariable was added to the Component tag.

An example using collectionVariable with value "menuData" is as follows:

{% component type: "menu", alias: "menu_example", collectionVariable: "menuData" %}

Looping through the collection to render all the top level item names in a list:

<ul>
{% for m in menuData.items %}
    <li>{{m['itemname']}}</li>
{% endfor %}
</ul>

Now, testing for sub menu items and nesting them in the list:

<ul>
{% for m in menuData.items %}
    <li>{{m['itemname']}}
      {% if m.items.size > 0 %}
        <ul>
            {% for subm in m.items %}
                <li>{{subm.itemname}}</li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
{% endfor %}
</ul>

Accessing a specific item within the collection. In this case the third menu item name (zero based index):

{{menuData.items[2]['itemname']}}


Related Articles

  • Menus
    Menus allow the easy creation and management of dynamic navigation elements. These can be rendered...

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.