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,
      "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,
      "items": []
    },
    {
      "id": 796,
      "itemid": null,
      "itemname": "Menu Item 3",
      "itemurl": "#",
      "itemtargetframe": null,
      "itemclass": null,
      "itemtitle": null,
      "itemcustomattribute": null,
      "itemenabled": true,
      "items": [
        {
          "id": 196,
          "itemid": null,
          "itemname": "Sub Menu Item 1",
          "itemurl": "#",
          "itemtargetframe": null,
          "itemclass": null,
          "itemtitle": null,
          "itemcustomattribute": null,
          "itemenabled": true,
          "items": []
        },
        {
          "id": 263,
          "itemid": null,
          "itemname": "Sub Menu Item 2",
          "itemurl": "#",
          "itemtargetframe": null,
          "itemclass": null,
          "itemtitle": null,
          "itemcustomattribute": null,
          "itemenabled": true,
          "items": []
        }
      ]
    }
  ],
  "parent": {
    "Id": 2228,
    "Url": "/demo-cs/basic-menu-example",
    "ParentId": 2224,
    "LastUpdatedDate": "2019-02-28T20:45:34",
    "AMPContent": "",
    "Author_Name": null,
    "Author_Url": null,
    "Author": 0,
    "CanonicalLink": "",
    "CodeEditor": true,
    "CreatedByMemberId": 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>",
    "DisableForSiteSearch": false,
    "EnableAMP": false,
    "Enabled": true,
    "ExpiryDate": "2099-12-10T18:00:00",
    "ExternalId": 0,
    "FtpFullPath": "Content\\Pages\\demo-cs\\basic-menu-example.html",
    "ItemCategories": null,
    "ItemCategoryIdList": null,
    "ItemTags": null,
    "MetaDescription": "",
    "Name": "Basic Menu Example",
    "OpenGraphProperties": "",
    "ReleaseDate": "2018-11-24T18:00:00",
    "SeoPriority": "",
    "SEOTitle": "",
    "MetaTitle": "",
    "ShowPageForSearchEngine": true,
    "SocialMetaTags": "",
    "UrlSlug": "basic-menu-example",
    "Weighting": 0,
    "parentname": "demo-cs",
    "parenturl": "/demo-cs",
    "templatename": "DEMO Companion Site",
    "ishome": false
  },
  "params": {}
}