This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <menu> element

The <menu> element represents a list of commands that the user can perform or activate. In modern HTML, it is essentially a semantic alternative to <ul> for a toolbar-like list of actions.

The items inside a <menu> are written with <li> elements. Those list items usually contain <button> elements or other controls that perform actions.

This makes <menu> different from an ordinary unordered list. A <ul> can list features, ingredients, links, facts, or choices. A <menu> is for commands: things the user can do.

A formatting toolbar is a natural example. Buttons such as Bold, Italic, Undo, or Preview can form a command list because each item is an action.

Browsers normally display <menu> as a bulleted list. CSS is needed to arrange its controls into a horizontal toolbar or give them another visual layout. The element does not automatically create a popup or a right-click context menu.

The example shows the structure of an editing command list. Its buttons use type="button" so they will not submit a form if the list is placed inside one. Their labels do not supply behaviour: these demonstration buttons have no actions attached. In an application, code would connect them to Undo, Redo, and Preview.

Attributes: GLOBALS.

Typical layout:
<menu>
  <li><button type="button">Undo</button></li>
  <li><button type="button">Redo</button></li>
  <li><button type="button">Preview</button></li>
</menu>
Visual representation:

Command buttons shown without attached actions.