Search.../

menuItems

Sets or gets mobile 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 mobile menu items:

  1. Store the value of the menuItems property in a variable.
  2. Make changes to the variable's array of items.
  3. Reset the menuItems property with the variable's modified array.

Type:

Array<MenuItem>Read & Write, default value is An array of mobile menu items defined using the Editor.
NAME
TYPE
DESCRIPTION
label
string

The label of the mobile menu item. This is text that the site visitor sees in the mobile 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 mobile menu defaults to the mobile 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 mobile 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 mobile menu item gets its value from the name of the page that the link property references.

Min: 1 character

Max: 40 characters

selected
boolean

Setting selected to true for a mobile menu item causes the item to appear highlighted and to expand any of its sub-items in the menu container. 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 sets selected to true 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 mobile menu (as defined when managing the mobile menu in the Editor) and not derived from a currently-active page in a custom mobile menu.

Default: false

link
string

Optional link for the mobile 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 as https://www.mortgagecalculator.org/.
  • wix:document://<location>: A document stored in the Media Manager, such as wix:document://v1/9bec_52fb06ea/filename.xls.
  • mailto:<email-address>?subject=<subject>: An email, such as mailto:michael@example.com?subject=Coming%20Soon.
  • tel:<phone number>: A phone number, such as tel:+1-555-555-5555.

If link isn't specified, the corresponding label isn't clickable.

Specifying an empty string is not supported. The mobile menu defaults to the mobile menu items as defined in the Editor and an error is logged to the console.

Min: 1 character

Max: 40 characters

target
string

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

menuItems
Array<MenuItem>

Menus can have 1 additional level of submenus.

Was this helpful?

Get mobile menu items

Copy Code
1let menuItems = $w('#myMobileMenu').menuItems;
2
3/* 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 */
Set mobile menu items for a mobile menu with a submenu

Copy Code
1$w('#myMobileMenu').menuItems = [
2 {label: 'Home', link: '/', selected: true},
3 {label: 'For Rent', link: '/rentals', menuItems: [
4 {label: 'Long Term', link: '/rentals/long'},
5 {label: 'Short Term', link: '/rentals/short'}
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];
Set items for a mobile menu that changes dynamically based on a visitor's role

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 mobile menu item for a hidden "For Realtors Only" page.

Copy Code
1import { currentMember } from 'wix-members-frontend';
2
3$w.onReady(async function () {
4 $w('#myMobileMenu').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('#myMobileMenu').menuItems;
14 items.push({
15 label: 'Realtors Only',
16 link: '/realtors'
17 });
18 $w('#myMobileMenu').menuItems = items;
19 }
20 } catch (error) {
21 // Handle the error
22 console.error(error);
23 }
24});
25
Add a new mobile menu item to an existing mobile menu

This example retrieves the mobile menu items, adds a new item, and then overwrites the old items.

Copy Code
1let menuItems = $w('#myMobileMenu').menuItems;
2menuItems.push({label: 'My New Label', link: '/mynewlink'});
3$w('#myMobileMenu').menuItems = menuItems;
4