HTML menu Tag in 2025 – Complete Guide with Examples & Best Practices

What is the menu Tag?

The <menu> tag in HTML is used to define a list of commands or menu items. It was initially introduced for context menus or toolbar menus, but its usage and support are limited.

⚠️ Important: <menu> was redefined in HTML5 to represent interactive command lists, but browser support is very limited and inconsistent. For navigation menus, use <nav> and <ul>.

Step-by-Step Usage of menu

Step 1: Basic Syntax

<menu>
  <li>Copy</li>
  <li>Paste</li>
  <li>Delete</li>
</menu>

This creates a basic unordered list — similar to <ul>.

Step 2: Use with `<menuitem>` (Deprecated)

HTML5 briefly allowed <menuitem> for defining interactive commands, but this tag is now deprecated and not supported in major browsers like Chrome.

<!-- Deprecated, no longer recommended -->
<menu type="context">
  <menuitem label="Refresh" onclick="location.reload();"></menuitem>
  <menuitem label="Help" onclick="alert('Help!');"></menuitem>
</menu>

When to Use menu

Use Case	Recommended?	Alternative
Navigation menu	❌	`<nav> + <ul>`
Command list (custom UI)	❌ (unsupported)	JavaScript dropdown
Context menu (right-click)	❌	JavaScript / ARIA

Correct Modern Alternative

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

menu tag vs ul

Feature	`<menu>`	`<ul>`
Browser Support	🚫 Poor	✅ Excellent
Semantic Use	⚠️ Limited	✅ Clear
Interactive Commands	❌ Deprecated	❌ Not intended
Recommended in 2025	❌ No	✅ Yes

Best Practices

Use <ul> or <ol> for listing items.
Use <nav> for semantic navigation blocks.
Avoid <menu> and <menuitem> for new projects.
Use ARIA roles and JavaScript for accessible menus.
Only use <menu> in legacy code if necessary.