🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

LOADING ENGINE...

<menu>

AI & DATA SCIENCE // menu-tag

The <menu> element is a list container, semantically similar to <ul>, historically intended for interactive toolbars and context menus of commands.

Syntax

<menu>
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
</menu>

Deep Dive Course

**`<menu>`** has an unusual history: earlier HTML specs positioned it as a distinct element for toolbars of commands or context menus, with a `type` attribute (`toolbar`, `context`, `list`) controlling its behavior. Current browsers render it essentially identically to `<ul>` and don't implement the old command-menu behaviors, so in practice today it's most often used, if at all, as a plain list container — semantically a near-synonym for `<ul>` — typically holding a set of `<li><button>` interactive commands.

1Understanding <menu>

`<menu>` has an unusual history: earlier HTML specs positioned it as a distinct element for toolbars of commands or context menus, with a type attribute (toolbar, context, list) controlling its behavior. Current browsers render it essentially identically to <ul> and don't implement the old command-menu behaviors, so in practice today it's most often used, if at all, as a plain list container — semantically a near-synonym for <ul> — typically holding a set of <li><button> interactive commands.

💡

Because browser support for menu's special toolbar/context behaviors never solidified, most developers today just use <ul> for lists and rely on JavaScript UI libraries for actual context menus and toolbars.

editor.html
<menu>
  <li><button onclick="document.execCommand('bold')">Bold</button></li>
  <li><button onclick="document.execCommand('italic')">Italic</button></li>
</menu>
localhost:3000

2Practical Example

Here is a real-world application of <menu> showing how it is used in production HTML.

editor.html
<!-- Functionally, <menu> renders like <ul> in modern browsers -->
<menu>
  <li>Item A</li>
  <li>Item B</li>
</menu>
localhost:3000

3Best Practices

Follow these guidelines when working with <menu>:

1. Don't rely on <menu> for real native context-menu or toolbar behavior — browser support is inconsistent

2. Use <ul> instead for standard lists unless you have a specific reason to use <menu>

3. If using <menu>, treat it as you would <ul> — wrap actionable items in <li><button>

⚠️

Tip: Because browser support for menu's special toolbar/context behaviors never solidified, most developers today just use <ul> for lists and rely on JavaScript UI libraries for actual context menus and toolbars.

editor.html
<menu>
  <li><button onclick="document.execCommand('bold')">Bold</button></li>
  <li><button onclick="document.execCommand('italic')">Italic</button></li>
</menu>
localhost:3000

Examples

Example 01Basic Usage
<menu>
  <li><button onclick="document.execCommand('bold')">Bold</button></li>
  <li><button onclick="document.execCommand('italic')">Italic</button></li>
</menu>
Example 02Advanced Example
<!-- Functionally, <menu> renders like <ul> in modern browsers -->
<menu>
  <li>Item A</li>
  <li>Item B</li>
</menu>

Best Practices

  • Don't rely on for real native context-menu or toolbar behavior — browser support is inconsistent
  • Use
      instead for standard lists unless you have a specific reason to use
    • If using , treat it as you would
        — wrap actionable items in

Interview Question

Why is <menu> rarely used in modern HTML despite being part of the spec?

Hint: Think about how consistently browsers actually implemented its special toolbar/context-menu features.

<menu> was designed with special types (toolbar, context, list) meant to give browsers native toolbar and context-menu rendering, but that behavior was never consistently implemented across browsers. As a result, it ended up functionally equivalent to <ul> in practice, so most developers simply use <ul> — which has universal, predictable support — instead of relying on <menu>'s unfulfilled special behavior.

Exercises

EasyPractice using <menu> in a real scenario.
View Solution
<menu>
  <li><button onclick="document.execCommand('bold')">Bold</button></li>
  <li><button onclick="document.execCommand('italic')">Italic</button></li>
</menu>

Frequently Asked Questions

Why is <menu> rarely used in modern HTML despite being part of the spec?

was designed with special types (toolbar, context, list) meant to give browsers native toolbar and context-menu rendering, but that behavior was never consistently implemented across browsers. As a result, it ended up functionally equivalent to
    in practice, so most developers simply use
      — which has universal, predictable support — instead of relying on 's unfulfilled special behavior.

Related Functions

ul-tagbutton-tag