# The “type” attribute on the “menu” element is obsolete. Use script to handle “contextmenu” event instead.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-type-attribute-on-the-menu-element-is-obsolete-use-script-to-handle-contextmenu-event-instead
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `type` attribute on the `<menu>` element is obsolete and should be removed.

The `<menu>` element was originally designed to support different types of menus, including `type="context"` for context menus and `type="toolbar"` for toolbars. These features were never widely implemented by browsers and have been removed from the HTML specification.

In the current HTML living standard, the `<menu>` element is simply a semantic alternative to `<ul>` for representing a list of interactive items or commands, such as a toolbar of buttons. It no longer accepts a `type` attribute.

If you need a custom context menu (right-click menu), the recommended approach is to use JavaScript to listen for the `contextmenu` event and display your own custom menu using standard HTML and CSS.

## Invalid Example

```html
<menu type="context" id="my-menu">
  <menuitem label="Copy"></menuitem>
  <menuitem label="Paste"></menuitem>
</menu>
```

## Valid Example

Using `<menu>` as a simple list of commands:

```html
<menu>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>
```

If you need a custom context menu, handle it with JavaScript:

```html
<div id="target">Right-click here</div>
<menu id="context-menu" style="display: none; position: absolute;">
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

<script>
  const target = document.getElementById("target");
  const menu = document.getElementById("context-menu");

  target.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    menu.style.display = "block";
    menu.style.left = e.pageX + "px";
    menu.style.top = e.pageY + "px";
  });

  document.addEventListener("click", () => {
    menu.style.display = "none";
  });
</script>
```

Note that the `<menuitem>` element is also obsolete and no longer part of the HTML specification. Use standard elements like `<button>` or `<a>` inside `<li>` elements instead.