Setting new menu items not working using Velo

Ask the community
, , , ,
1

I’m having trouble with
Trying to set new menu items using Velo, but it’s not updating in my site. Code:

    let mainMenuItems = $w("#menu-main").menuItems
	mainMenuItems.push({
		label: "My New Label",
		link: "/learning",
		id: "my-new-id",
	})
	$w("#menu-main").menuItems = mainMenuItems

	console.log($w("#menu-main").menuItems, mainMenuItems)

Working in
Wix Studio Editor, dev code

What I’m trying to do
Programmatically update menu using Velo. (Basically, I have to add values from a CMS table into a dropdown menu and am trying to do a small test first to see if it works.)

What I’ve done so far
Basically the code you see above. I’ve tried viewing in site preview and also on publish site; neither work. Not sure if it has to do with the context of the page.

Extra context
This is what I see after the last console.log; it seems like mainMenuItems is updated, but somehow setting it is not working.

image
image811×304 6.41 KB

Code is in masterPage.js.

I’ve verified that the selector is correct (and again, the first console.log prints the current menu nicely).

image

2

So I see in a previous forum post that it can be due to the number of nested submenus. When I removed a submenu level, adding a new item worked. However, now I would like to ask:

The API says that if you set a menu as advanced, you can have two additional submenus? (Not sure if I’m understanding correctly)

image
image720×162 10.1 KB

I’m on the newest type of menu (with dropdowns). How do I do this?