
_36"vtex.menu@2.x:menu#websites": {
_36    "children": [
_36      "menu-item#shop",
_36      "menu-item#about-us"
_36    ]
_36  },
_36  "menu-item#shop": {
_36    "props": {
_36      "id": "menu-item-shop",
_36      "type": "custom",
_36      "iconId": null,
_36      "highlight": false,
_36      "itemProps": {
_36        "type": "internal",
_36        "href": "#",
_36        "noFollow": false,
_36        "tagTitle": "Shop",
_36        "text": "Shop"
_36      }
_36    }
_36  },
_36  "menu-item#about-us": {
_36    "props": {
_36      "id": "menu-item-about-us",
_36      "type": "custom",
_36      "iconId": null,
_36      "highlight": false,
_36      "itemProps": {
_36        "type": "internal",
_36        "href": "/about-us",
_36        "noFollow": false,
_36        "tagTitle": "about-us",
_36        "text": "About Us"
_36      }
_36    }
_36  }

This old configuration made Menu items only editable in code. Now, however, you can declare Menu items directly as menu block props, making them editable using Site Editor.

Following the example above, we'll have the following as base of the block's new configuration:


_32"vtex.menu@2.x:menu#websites": {
_32    "props": {
_32      "items": [
_32        {
_32          "id": "menu-item-shop",
_32          "type": "custom",
_32          "iconId": null,
_32          "highlight": false,
_32          "itemProps": {
_32            "type": "internal",
_32            "href": "#",
_32            "noFollow": false,
_32            "tagTitle": "Shop",
_32            "text": "Shop"
_32          }
_32        },
_32        {
_32          "id": "menu-item-about-us",
_32          "type": "custom",
_32          "iconId": null,
_32          "highlight": false,
_32          "itemProps": {
_32            "type": "internal",
_32            "href": "/about-us",
_32            "noFollow": false,
_32            "tagTitle": "about-us",
_32            "text": "About Us"
_32          }
_32        }
_32    ]
_32    }
_32}

Main advantages

Configuring menu-items in lists grants retailers technical independence with regards to the source code, allowing them to implement desired Menu changes using the Site Editor.

What you need to do

Your store is already prepared to configure menu-items as props! For more on how the Menu component works, access its related documentation.

What has changed

Main advantages

What you need to do