menuItems
Sets or gets menu items.
Description
Setting the menuItems
property sets the items
for a menu element.
Getting the menuItems
property returns a menuItems
array of menu items that have been set using code. If no
items have been set using code, the array defaults to the items defined using the Editor.
You can't modify the menuItems
array in-place. To add, change, or remove
individual menu items:
- Store the value of the
menuItems
property in a variable. - Make changes to the variable's array of items.
- Reset the
menuItems
property with the variable's modified array.
To have the option for 2 additional submenus available for your horizontal menu, it must first be set as an advanced menu. To set as an advanced menu, select the menu in the Velo editor, click the Settings icon, and click on Set as Advanced.
Type:
NAME
TYPE
DESCRIPTION
The label of the menu item. This is text that the site visitor sees in the menu and can click to navigate.
If not specified, and the page that the link property references is:
- An external page or an empty string: The menu defaults to the menu items based on site pages only, as defined in the Editor, and an error is logged to the console.
- A page nested under a folder: The specific menu item label defaults to the name of the corresponding page as defined in the Editor.
- A regular, non-nested, site page: The
label
for the menu item gets its value from the name of the page that thelink
property references.
Min: 1 character
Max: 40 characters
Setting selected
to true
for a menu item causes the item to appear highlighted in the menu element.
You can use this property to indicate which page is currently being displayed.
Note: The value of
selected
isn't validated against which page is actually displayed. For example, you can write code that misleadingly setsselected
totrue
for multiple menu items.
When not defined explicitly using the selected
property, the selected
value is derived from the currently-active page in the site's main menu
(as defined when managing the menu in the Editor) and not derived from a currently-active page in a custom menu.
Default: false
Optional link for the menu item. This is the link the site visitor navigates to when they click on a menu item. The different types of links you can use are:
/localPageURL
: Another page on your site, such as/about
or/rentals/shortterm
./
: Your site's home page.http(s)://<url>
: An external web address, such ashttps://www.mortgagecalculator.org/
.wix:document://<location>
: A document stored in the Media Manager, such aswix:document://v1/9bec_52fb06ea/filename.xls
.mailto:<email-address>?subject=<subject>
: An email, such asmailto:michael@example.com?subject=Coming%20Soon
.tel:<phone number>
: A phone number, such astel:+1-555-555-5555
.
If link
isn't specified, the corresponding label isn't clickable.
Specifying an empty string is not supported. The menu defaults to the menu items as defined in the Editor and an error is logged to the console.
Min: 1 character
Max: 40 characters
Whether the link opens in the same window/tab or in a new window/tab.
_self
. The page opens in the same window/tab._blank
. The page opens in a new window/tab.
Note:
target
doesn't work when previewing your site.
Default: _self
Menus can have additional levels of submenus. Vertical menus can have 1 level of submenus. Horizontal menus can have 2 additional levels of submenus.
A unique ID that can be used to customize events triggered on a menu item. For example, when a visitor clicks a menu item, the ID can be checked in order to trigger the appropriate action for that menu item.
Was this helpful?
1let menuItems = $w('#myMenu').menuItems;23/* Sample array of menu items:4 *5 * [6 * {7 * "link": "https://myairlines.com",8 * "target": "_self",9 * "label": "Home",10 * "selected": true,11 * "menuItems": []12 * },13 * {14 * "link": "https://myairlines.com/reservations",15 * "target": "_self",16 * "label": "Book a Flight",17 * "selected": false,18 * "menuItems": []19 * },20 * {21 * "link": "https://myairlines.com/frequentflier",22 * "target": "_self",23 * "label": "Mileage Program",24 * "selected": false,25 * "menuItems": [26 * {27 * "link": "https://myairlines.com//frequentflier/join",28 * "target": "_self",29 * "label": "Join",30 * "selected": false,31 * "menuItems": []32 * },33 * {34 * "link": "https://myairlines.com/frequentflier/check",35 * "target": "_self",36 * "label": "Check Miles",37 * "selected": false,38 * "menuItems": []39 * }40 * ]41 * }42 * ]43 */
1$w('#myHorizontalMenu').menuItems = [2 {label: 'Home', link: '/', selected: true, id: 'item-id-1'},3 {label: 'For Rent', link: '/rentals', id: 'item-id-2'},4 {label: 'For Sale', link: '/purchases', id: 'item-id-3'},5 {label: 'Mortgage calculator', link: 'https://www.mortgagecalculator.org/', target: '_blank', id: 'item-id-4'},6 {label: 'About Us', link: '/about', id: 'item-id-5'}7];
1$w('#myVerticalMenu').menuItems = [2 {label: 'Home', link: '/', selected: true},3 {label: 'For Rent', link: '/rentals', id: 'rentals-id', menuItems: [4 {label: 'Long Term', link: '/rentals/long', id: 'rentals-id-1'},5 {label: 'Short Term', link: '/rentals/short', id: 'rentals-id-2'}6 ]},7 {label: 'For Sale', link: '/purchases'},8 {label: 'Mortgage calculator', link: 'https://www.mortgagecalculator.org/', target: '_blank'},9 {label: 'About Us', link: '/about'}10];
This example assumes that roles have been defined for the site and checks the visitor's role. If the visitor is a realtor, the visitor sees an additional menu item for a hidden "For Realtors Only" page.
1import { currentMember } from 'wix-members-frontend';23$w.onReady(async function () {4 $w('#horizontalMenu').menuItems = [5 {label: 'Home', link: '/', selected: false},6 {label: 'For Rent', link: '/rentals'},7 {label: 'For Sale', link: '/purchases'}8 ]9 try {10 const roles = await currentMember.getRoles();11 const foundRole = roles.some(role => role.title === 'Realtor');12 if (foundRole) {13 let items = $w('#horizontalMenu').menuItems;14 items.push({15 label: 'Realtors Only',16 link: '/realtors'17 });18 $w('#horizontalMenu').menuItems = items;19 }20 } catch (error) {21 // Handle the error22 console.error(error);23 }24});25
This example retrieves the menu items, adds a new item, and then overwrites the old items.
1let menuItems = $w('#myMenu').menuItems;2menuItems.push({label: 'My New Label', link: '/mynewlink', id: 'my-new-id'});3$w('#myMenu').menuItems = menuItems;4
This example assumes that a lightbox has been defined for the site. The lightbox displays when a visitor clicks the corresponding menu item informing the visitor that the page is not yet ready. The code identifies the corresponding menu item by its ID.
1import { openLightbox } from 'wix-window-frontend';23$w.onReady(function () {4 $w('#myMenu').menuItems = [{5 label: 'About us',6 id: 'about-id'7 }, {8 label: 'New collection',9 id: 'new-collection-id'10 }];1112 $w('#myMenu').onItemClick(event => {13 if (event.item.id === 'new-collection-id') {14 openLightbox('Coming Soon');15 }16 });17});18