HTML onshow Event Attribute


The HTML onshow event attribute fires when a <menu> element is shown as a context menu. It is a new attribute in HTML5 and is not supported in all browsers.

To use the onshow attribute, you simply add it to the <menu> element and assign it the name of a JavaScript function. When the context menu is shown, the function will be executed.

Here is an example of how to use the onshow attribute:

<menu onshow="myFunction()">
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>

The myFunction() function can be used to perform any task you want, such as updating the contents of the context menu or displaying a message to the user.

Here is an example of a simple myFunction() function:

function myFunction() {
  alert("The context menu is now showing!");

When you right-click on a web page that contains the above code, you will see a context menu with two options. When you click on either option, the myFunction() function will be executed and an alert message will be displayed.

The onshow event attribute is a useful way to add custom functionality to context menus.


<element onshow="script">


  • scriptThe name of the script to use when the event has been triggered.


<!DOCTYPE html > 
<title>onshow event</title>
<div contextmenu="mymenu">
<p>Right click here to see the context menu.!</p>
<menu type="context" id="mymenu" onshow="test()">
<menuitem label="Refresh" onclick="window.location.reload();"></menuitem>
function test() {
alert("EXAMPLE: The context menu will be shown!");

Browser Support

The following table will show you the current browser support for the HTML onshow Event Attribute.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 14th October 2023