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
<ul>
The <ul> element represents an unordered list of items, typically displayed with bullet points. The order of items has no semantic meaning — use <ol> instead when sequence matters. Every item inside a <ul> must be wrapped in an <li> (list item) element. Unordered lists are commonly used for navigation menus, feature lists, and any collection of related items.<ol>
The <ol> element represents an ordered (numbered) list, where the sequence of items is meaningful. Like <ul>, every item must be wrapped in an <li> element. Browsers automatically number items starting from 1, but this can be customized using the start and reversed attributes, or a different numbering style with the type attribute. Ordered lists are ideal for step-by-step instructions, rankings, and recipes.<dl>, <dt>, <dd>
The description list group represents a list of term/description pairs — like a glossary or metadata list. <dl> wraps the whole list, <dt> defines each term, and <dd> defines its associated description. Unlike <ul>/<ol>, description lists are not bulleted or numbered by default.<li>
The <li> element represents an individual item within a list — <ul>, <ol>, or <menu>. Its rendering depends on its parent: inside <ol>, browsers add sequential numbering; inside <ul>, they add bullet points. The value attribute lets you override an item's number specifically within an ordered list.
The <ul> element represents an unordered list of items, typically displayed with bullet points. The order of items has no semantic meaning — use <ol> instead when sequence matters. Every item inside a <ul> must be wrapped in an <li> (list item) element. Unordered lists are commonly used for navigation menus, feature lists, and any collection of related items.<ol>
The <ol> element represents an ordered (numbered) list, where the sequence of items is meaningful. Like <ul>, every item must be wrapped in an <li> element. Browsers automatically number items starting from 1, but this can be customized using the start and reversed attributes, or a different numbering style with the type attribute. Ordered lists are ideal for step-by-step instructions, rankings, and recipes.<dl>, <dt>, <dd>
The description list group represents a list of term/description pairs — like a glossary or metadata list. <dl> wraps the whole list, <dt> defines each term, and <dd> defines its associated description. Unlike <ul>/<ol>, description lists are not bulleted or numbered by default.<li>
The <li> element represents an individual item within a list — <ul>, <ol>, or <menu>. Its rendering depends on its parent: inside <ol>, browsers add sequential numbering; inside <ul>, they add bullet points. The value attribute lets you override an item's number specifically within an ordered list.