HTML Tags
HTML <menu> Tag
Learn how the HTML <menu> tag represents a toolbar containing an unordered list of commands.
The
<menu>tag represents a toolbar containing an unordered list of commands that a user can perform or activate.
Its items are normally written as<li>elements containing controls such as buttons.
Syntax
html
<menu>
<li><button type="button">Save</button></li>
<li><button type="button">Share</button></li>
</menu>Attributes
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for CSS styling. |
| id | Defines a unique identifier for the element. |
| style | Adds inline CSS styles. |
| title | Provides additional information as a tooltip when hovered. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Tag Example</title>
<style>
menu {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
}
menu button {
border: 0;
border-radius: 6px;
background-color: #29AB87;
color: white;
padding: 10px 16px;
cursor: pointer;
}
menu button:hover {
background-color: #218c70;
}
</style>
</head>
<body>
<h1>Article Actions</h1>
<menu>
<li><button type="button">Save</button></li>
<li><button type="button">Share</button></li>
<li><button type="button">Print</button></li>
</menu>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <menu> element is supported by all major modern browsers.
Notes
- Use
<menu>for a toolbar or an unordered list of commands that users can activate. - Use
<ul>for a general unordered list whose items are primarily displayed as content. - Place each command in an
<li>, usually with an interactive control such as a<button>. - Browsers render
<menu>similarly to<ul>; use CSS to create the toolbar layout. - The old context-menu use of
<menu>is obsolete and should not be used. - The obsolete
compactattribute should be replaced with CSS. - Both the opening and closing tags are required.
Conclusion
The <menu> tag provides a semantic way to group commands into a toolbar.
Use it with list items and interactive controls when users need to perform a related set of actions.