Codectionary / Developer documentation / HTML

<menu>

The <menu> element is a semantic alternative to <ul>, intended specifically for lists of commands or interactive items — like a toolbar or context menu — rather than plain content lists. Browsers currently render it identically to <ul>, but it signals different intent to assistive technology and future tooling.

Syntax

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

Examples

Toolbar of Actions

Using menu for a group of command buttons.

<menu>
  <li><button onclick="save()">Save</button></li>
  <li><button onclick="undo()">Undo</button></li>
  <li><button onclick="redo()">Redo</button></li>
</menu>

Styled Horizontal Menu

Laying out a menu of actions horizontally.

<menu style="display: flex; gap: 8px; list-style: none; padding: 0;">
  <li><button>Edit</button></li>
  <li><button>Delete</button></li>
  <li><button>Share</button></li>
</menu>

Context Menu Items

A list of commands representing right-click style actions.

<menu>
  <li><button>Rename</button></li>
  <li><button>Duplicate</button></li>
  <li><button>Move to Trash</button></li>
</menu>

Best practices

  • Use menu specifically for lists of commands or actions, not general content — use ul for that
  • Wrap each command in a proper interactive element like button, not just plain text
  • Since visual rendering matches ul by default, do not rely on menu for any built-in styling — use CSS as you would for any list
  • Consider whether a native button toolbar without menu wrapping is simpler for straightforward cases

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation