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

Liquid Output

{
  "Name": "DEMO Menu Example",
  "Alias": "demo_menu_example",
  "LayoutGroup": "",
  "Items": [
    {
      "id": 388,
      "ItemId": null,
      "ItemName": "Menu Item 1",
      "ItemUrl": "#",
      "ItemTargetFrame": null,
      "ItemClass": null,
      "ItemTitle": null,
      "ItemCustomAttribute": null,
      "ItemEnabled": true,
      "ReleaseDate": null,
      "ExpiryDate": null,
      "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,
      "ReleaseDate": null,
      "ExpiryDate": null,
      "Items": []
    },
    {
      "id": 796,
      "ItemId": null,
      "ItemName": "Menu Item 3",
      "ItemUrl": "#",
      "ItemTargetFrame": null,
      "ItemClass": null,
      "ItemTitle": null,
      "ItemCustomAttribute": null,
      "ItemEnabled": true,
      "ReleaseDate": null,
      "ExpiryDate": null,
      "Items": [
        {
          "id": 196,
          "ItemId": null,
          "ItemName": "Sub Menu Item 1",
          "ItemUrl": "#",
          "ItemTargetFrame": null,
          "ItemClass": null,
          "ItemTitle": null,
          "ItemCustomAttribute": null,
          "ItemEnabled": true,
          "ReleaseDate": null,
          "ExpiryDate": null,
          "Items": []
        },
        {
          "id": 263,
          "ItemId": null,
          "ItemName": "Sub Menu Item 2",
          "ItemUrl": "#",
          "ItemTargetFrame": null,
          "ItemClass": null,
          "ItemTitle": null,
          "ItemCustomAttribute": null,
          "ItemEnabled": true,
          "ReleaseDate": null,
          "ExpiryDate": null,
          "Items": []
        }
      ]
    }
  ],
  "Params": {
    "type": "menu",
    "alias": "demo_menu_example",
    "collectionvariable": "menuData"
  }
}