# How can I read the value of a menu item within a sub menu and make an action as the item is clicked?

**URL:** <https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693>\
**Category:** Ask the community\
**Tags:** technical-talk, question, wix-editor, code, wix\
**Created:** [April 30, 2024, 6:04pm UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693 "2024-04-30T18:04:08Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![DJ\_Lord](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dj_lord/32/91458_2.png) [@DJ\_Lord](https://forum.wixstudio.com/u/DJ_Lord)\
**Post date:** [April 30, 2024, 6:04pm UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/1 "2024-04-30T18:04:08Z")

</div>

**Question:**  
How can I read the value of a menu item within a sub menu and make an action as the item is clicked?

**Product:**  
Wix Editor & Code

**What are you trying to achieve:**  
I am new to code, so I may be wrong on my approach. I am trying to create a variable that has the label of the menu item, and upon click of that item (it doesn’t have to be a variable, I’m just not sure the proper approach) it will do other actions. I am trying to use the “.menuItem” feature, though it does not take “.onItemClick” or “.onClick” afterwards. Is there a different approach or a solution that I am missing?

**What have you already tried:**  
Online Forums / Documents

**Additional information:**  
Ultimately, I am trying to make it so as someone clicks on one item on the menu, it takes them to a specific slide (on a slideshow) on another page. **I am not trying to create a custom menu, as I already have a menu setup through Wix and I like the current style.** _Currently, the menu item goes to the section that has the slideshow, but DOES NOT actually display the specific Slide I am wanting_.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [April 30, 2024, 7:44pm UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/2 "2024-04-30T19:44:46Z")

</div>

How do look like your menu ?

---

<div class="post-metadata">

**Author:** ![DJ\_Lord](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dj_lord/32/91458_2.png) [@DJ\_Lord](https://forum.wixstudio.com/u/DJ_Lord)\
**Post date:** [May 1, 2024, 2:09am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/3 "2024-05-01T02:09:41Z")

</div>

It’s just the typical menu (attached image)

 ![Screen Shot 2024-04-30 at 9.08.11 PM](https://us1.discourse-cdn.com/wix/original/3X/e/0/e02d08fdc8df0f10545904c50ce4184b95f7fa6f.png)  
–blacked out parts just for privacy and no this is not final, was messing with menus & code

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [May 1, 2024, 9:02am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/4 "2024-05-01T09:02:59Z")

</div>

So you are using the wix-horizontal-menu?

How to read subMenu ???

1. get all menu-data…  
`let menuItems = $w('#myMenu').menuItems;`

2. using a → console.log(…)

console.log(menuItems);

You will get something like…

```javascript
/* Sample array of menu items: 
 *
 * [
 * {
 * "link": "https://myairlines.com",
 * "target": "_self",
 * "label": "Home",
 * "selected": true,
 * "menuItems": []
 * },
 * {
 * "link": "https://myairlines.com/reservations",
 * "target": "_self",
 * "label": "Book a Flight",
 * "selected": false,
 * "menuItems": []
 * },
 * {
 * "link": "https://myairlines.com/frequentflier",
 * "target": "_self",
 * "label": "Mileage Program",
 * "selected": false,
 * "menuItems": [
 * {
 * "link": "https://myairlines.com//frequentflier/join",
 * "target": "_self",
 * "label": "Join",
 * "selected": false,
 * "menuItems": []
 * },
 * {
 * "link": "https://myairlines.com/frequentflier/check",
 * "target": "_self",
 * "label": "Check Miles",
 * "selected": false,
 * "menuItems": []
 * }
 * ]
 * }
 * ]
 */

```

Each of menu includes a sub-menu…  
 ![2024-05-01 10_53_48-Window](https://us1.discourse-cdn.com/wix/original/3X/3/f/3f2c2a6b1fde2ffdec654d62a4ef0d86e8b8d47b.png)

1. Now you should be able to grab this specific menu and manipulate it or add new items (sub-items) to it.

**This one for example will add a new menu-item…**

```javascript
let menuItems = $w('#myMenu').menuItems;

menuItems.push({label: 'My New Label', link: '/mynewlink', id: 'my-new-id'});

$w('#myMenu').menuItems = menuItems;

```

1. This one should generate an including sub-menu…

```javascript
menuItems.push(
    {
        label: 'My New Label', 
        link: '/mynewlink', 
        id: 'my-new-id',
        menuItems: [
        {
          "link": "https://myairlines.com//frequentflier/join",
          "target": "_self",
          "label": "Join",
          "selected": false,
          "menuItems": []
        },
        {
          "link": "https://myairlines.com/frequentflier/check",
          "target": "_self",
          "label": "Check Miles",
          "selected": false,
          "menuItems": []
        }
      ]
    }
);

```

---

<div class="post-metadata">

**Author:** ![DJ\_Lord](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dj_lord/32/91458_2.png) [@DJ\_Lord](https://forum.wixstudio.com/u/DJ_Lord)\
**Post date:** [May 1, 2024, 9:56am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/5 "2024-05-01T09:56:49Z")

</div>

Hey:

I am using horizontal menu, yes. I’m not trying to ADD anything to my menu. I am wanting to make it so when one of the buttons (which is part of a submenu) is clicked, it goes to a spacific page and opens a certain slide.

I cannot seem to get it to work to make it where onClick of the menu item as I cannot use onClick or onItemClick with menuItem.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [May 1, 2024, 10:03am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/6 "2024-05-01T10:03:36Z")

</div>

```javascript
$w('#myMenu').onItemClick((event)=> {console.log(event.target.id);
   let label = event.item.label; console.log('Label: ', label);
   let link = event.item.link; console.log('Link: ', link);
});

```

---

<div class="post-metadata">

**Author:** ![DJ\_Lord](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dj_lord/32/91458_2.png) [@DJ\_Lord](https://forum.wixstudio.com/u/DJ_Lord)\
**Post date:** [May 1, 2024, 10:41am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/7 "2024-05-01T10:41:03Z")

</div>

Hello,

I’ll try this here soon. I should be able to make an “IF” statement saying that if label == “value” then it’ll do an action, correct?

Thanks!

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [May 1, 2024, 10:50am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/8 "2024-05-01T10:50:46Z")

</div>

Correct.

1. you click a menu-item
2. you get the menu-data
3. you create an if-else-condition
4. you start a function → regarding the result of → IF-ELSE-CONDITION

```javascript
if(label === 'xyz') {console.log('do something')}
else {console.log('do something else');}

```

---

<div class="post-metadata">

**Author:** ![DJ\_Lord](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dj_lord/32/91458_2.png) [@DJ\_Lord](https://forum.wixstudio.com/u/DJ_Lord)\
**Post date:** [May 1, 2024, 12:31pm UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/10 "2024-05-01T12:31:42Z")

</div>

> [@CODE-NINJA](#):
>
> ```javascript
> if(label === 'xyz') {console.log('do something')}
> else {console.log('do something else');}
> 
> ```

What would I add to all of this to allow for items in a dropdown (About Us → Xyz Page)? For the “label” variable?

---

<div class="post-metadata">

**Author:** ![DJ\_Lord](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dj_lord/32/91458_2.png) [@DJ\_Lord](https://forum.wixstudio.com/u/DJ_Lord)\
**Post date:** [May 1, 2024, 3:05pm UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/11 "2024-05-01T15:05:28Z")

</div>

Hey, I tried a bunch of different methods and I still can’t seem to get it to work. I want to use the already-existing submenu options.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [May 2, 2024, 8:41am UTC](https://forum.wixstudio.com/t/how-can-i-read-the-value-of-a-menu-item-within-a-sub-menu-and-make-an-action-as-the-item-is-clicked/58693/12 "2024-05-02T08:41:47Z")

</div>

> [@CODE-NINJA](#):
>
> ```javascript
> $w('#myMenu').onItemClick((event)=> {console.log(event.target.id);
> let label = event.item.label; console.log('Label: ', label);
> let link = event.item.link; console.log('Link: ', link);
> });
> 
> ```

An example for you…

> **[Home | My Site 7](https://russian-dima.wixstudio.com/my-site-7)**

Running code…

```javascript
$w.onReady(function() {
	let menuItems = $w('#horizontalMenu1').menuItems; console.log('Menu: ', menuItems);

	$w('#horizontalMenu1').onItemClick((event)=> {console.log('Clicked-ID: ', event.target.id);
   		let label = event.item.label; console.log('Label: ', label);
		let link = event.item.link; console.log('Link: ', link);

		if(label === 'Sub-Menu-1') {console.log('You clicked Sub-Menu-1');}
		else if(label === 'Sub-Menu-2') {console.log('You clicked Sub-Menu-2');}
		else if(label === 'Sub-Menu-3') {console.log('You clicked Sub-Menu-3');}
		else if(label === 'Sub-Menu-4') {console.log('You clicked Sub-Menu-4');}
	});
});

```

You will find a simple HORIZONTAL-MENU, with 3 Main-Menu-Items and 4 Sub-Menu-Items…

 ![2024-05-02 10_40_04-Home _ My Site 7](https://us1.discourse-cdn.com/wix/original/3X/5/b/5be4e7ea72d3e28c162cde817ade76d438a66742.png)

Take a look onto the LOGS…

 ![2024-05-02 10_40_48-Home _ My Site 7](https://us1.discourse-cdn.com/wix/original/3X/0/b/0bf41fd298e336c3730e7c9be2d35062dc252630.png)

… when clicking onto one of the → SUBMENUS \<—.

**Why it always is known, which Sub-Menu-Item was clicked???**

Expand the functionality of this example and you’ll get what you want.

Full Menu-Object-Tree…

 ![2024-05-02 10_45_15-Home _ My Site 7](https://us1.discourse-cdn.com/wix/original/3X/5/2/5202c853096adb285ba207b942a0e5495be82c86.png)