Search.../
  1. APIs

onItemClick( )

Adds an event handler that runs when a user clicks a menu item.

Syntax

function onItemClick(handler: MenuItemMouseEventHandler): MenuItem
handler: function MenuItemMouseEventHandler(event: MenuItemMouseEvent): void

onItemClick Parameters

NAME
TYPE
DESCRIPTION
handler
MenuItemMouseEventHandler

The name of the function or the function expression to run when the menu item is clicked.

Returns

The menu item on which the event is now registered.

Return Type:

MenuItem
NAME
TYPE
DESCRIPTION
label
string

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 the link property references.

Min: 1 character

Max: 40 characters

selected
boolean

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 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 menu (as defined when managing the menu in the Editor) and not derived from a currently-active page in a custom menu.

Default: false

link
string

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 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 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

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 additional levels of submenus. Vertical menus can have 1 level of submenus. Horizontal menus can have 2 additional levels of submenus.

id
string

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.

MenuItemMouseEventHandler Parameters

NAME
TYPE
DESCRIPTION
event
MenuItemMouseEvent

The mouse event that occurred on a menu item.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Get information about the menu item that was clicked

Copy Code
1$w('#myMenu').onItemClick( (event) => {
2  let label = event.item.label;  // "Home"
3  let link = event.item.link;  // "https://myairlines.com/"
4} );