Basic Menu Example

Standard Rendering from Component tag

{% component type: "menu", alias: "demo_menu_example" %}

Custom Rendering from Liquid Collection

{% component type: "menu", alias: "demo_menu_example", collectionVariable: "menuData" %}
<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>
  • Menu Item 1
  • Menu Item 2
  • Menu Item 3
    • Sub Menu Item 1
    • Sub Menu Item 2
{
  "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": 2228,
  "Url": "/demo-cs/basic-menu-example",
  "ParentId": 2224,
  "LastUpdatedDate": "2019-02-28T20:45:34",
  "Name": "Basic Menu Example",
  "UrlSlug": "basic-menu-example",
  "Enabled": true,
  "ReleaseDate": "2018-11-24T18:00:00",
  "ExpiryDate": "2099-12-10T18:00:00",
  "Weighting": 0,
  "Description": "{% component type: \"menu\", alias: \"demo_menu_example\", collectionVariable: \"menuData\" %}\r\n\r\n<h1>Basic Menu Example</h1>\r\n<div class=\"grid-x grid-padding-x\">\r\n    <div class=\"cell medium-6\">\r\n        <h3>Standard Rendering from Component tag</h3>\r\n            <pre>{% raw %}{% component type: \"menu\", alias: \"demo_menu_example\" %}{% endraw %}</pre>\r\n        {% component type: \"menu\", alias: \"demo_menu_example\" %}\r\n        <hr>\r\n        <h3>Custom Rendering from Liquid Collection</h3>\r\n        <pre>{% raw %}{% component type: \"menu\", alias: \"demo_menu_example\", collectionVariable: \"menuData\" %}{% endraw %}</pre>\r\n{% capture menuloop %}{% raw %}<ul>\r\n    {% for m in menuData.items %}\r\n    <li>{{m.itemname}}\r\n        {% if m.items.size > 0 %}\r\n            <ul>\r\n                {% for subm in m.items %}\r\n                    <li>{{subm.itemname}}</li>\r\n                {% endfor %}\r\n            </ul>\r\n        {% endif %}\r\n    </li>\r\n    {% endfor %}\r\n</ul>{% endraw %}{% endcapture %}\r\n        <pre>{{menuloop | escape}}</pre>\r\n        <ul>\r\n            {% for m in menuData.items %}\r\n            <li>{{m.itemname}}\r\n                {% if m.items.size > 0 %}\r\n                    <ul>\r\n                        {% for subm in m.items %}\r\n                            <li>{{subm.itemname}}</li>\r\n                        {% endfor %}\r\n                    </ul>\r\n                {% endif %}\r\n            </li>\r\n            {% endfor %}\r\n        </ul>\r\n    </div>\r\n    <div class=\"cell medium-6\">\r\n        <ul class=\"tabs\" data-tabs id=\"code-tabs\">\r\n            <li class=\"tabs-title is-active\"><a href=\"#panel1\" aria-selected=\"true\">Liquid Output</a></li>\r\n        </ul>\r\n        <div class=\"tabs-content\" data-tabs-content=\"code-tabs\">\r\n            <div class=\"tabs-panel is-active\" id=\"panel1\">\r\n                <pre>{{menuData | escape}}</pre>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>",
  "ItemTags": "",
  "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": "",
  "FtpFullPath": "Content\\Pages\\demo-cs\\basic-menu-example.html",
  "Module_ID": 1522,
  "Module_Alias": "Page",
  "ParentName": "demo-cs",
  "ParentUrl": "/demo-cs",
  "TemplateName": "DEMO Companion Site",
  "IsHome": false
},
  "Params": {
  "type": "menu",
  "alias": "demo_menu_example",
  "collectionVariable": "menuData"
}
}