HTML Free Codes<menu>
Defines a semantic menu or toolbar
✨ HTML5Definition and Usage
The <menu> element establishes a semantic menu or toolbar containing a list of commands or options.
The <menu> element is similar to <ul>, but it specifically represents a menu of commands or options rather than just a list. It's used for creating toolbars, context menus, and command lists.
Common uses for the <menu> element:
- Toolbar buttons
- Context menus
- Command lists
- Menu bars in applications
- Form toolbars
Note: The
type attribute (toolbar, context, list) was previously supported but is now deprecated. The <menu> tag now only supports global attributes.
Tip: Use
<menu> for interactive menus and toolbars, and <ul> for regular lists. The semantic difference helps with accessibility and SEO.
Browser Support
The <menu> tag is supported in all major browsers:
Chrome
8.0+
Firefox
8.0+
Safari
5.1+
Edge
79.0+
Opera
12.1+
Attributes
The <menu> tag supports the Global Attributes in HTML.
The <menu> tag also supports the Event Attributes in HTML.
Deprecated: The
type and label attributes are no longer supported in modern HTML specifications.
Examples
Basic Toolbar Menu
Create a simple toolbar with buttons:
Example
<menu>
<li><button>New</button></li>
<li><button>Open</button></li>
<li><button>Save</button></li>
<li><button>Close</button></li>
</menu>Styled Toolbar
Create a horizontal toolbar with CSS styling:
Example
<style>
menu {
display: flex;
gap: 8px;
padding: 10px;
background: #f4f4f4;
border-radius: 6px;
list-style: none;
margin: 0;
}
menu button {
padding: 8px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
menu button:hover {
background: #745af2;
color: white;
}
</style>
<menu>
<li><button>Cut</button></li>
<li><button>Copy</button></li>
<li><button>Paste</button></li>
</menu>Context Menu
Create a context menu for right-click actions:
Example
<style>
.context-menu {
position: absolute;
background: var(--bg-primary);
border: 1px solid var(--border-color);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 8px 0;
list-style: none;
margin: 0;
display: none;
}
.context-menu li {
padding: 8px 24px;
cursor: pointer;
}
.context-menu li:hover {
background: #745af2;
color: white;
}
</style>
<menu class="context-menu" id="contextMenu">
<li>Open</li>
<li>Edit</li>
<li>Delete</li>
<li>Properties</li>
</menu>Nested Menus
Create a menu with submenus:
Example
<menu>
<li>
<button>File</button>
<menu>
<li><button>New</button></li>
<li><button>Open</button></li>
<li><button>Save</button></li>
</menu>
</li>
<li>
<button>Edit</button>
<menu>
<li><button>Cut</button></li>
<li><button>Copy</button></li>
<li><button>Paste</button></li>
</menu>
</li>
</menu>Interactive Menu with Icons
Create an interactive toolbar with icons and tooltips:
Example
<style>
.icon-menu {
display: flex;
gap: 4px;
background: #2c3e50;
padding: 8px;
border-radius: 8px;
list-style: none;
margin: 0;
}
.icon-menu button {
width: 40px;
height: 40px;
background: transparent;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
border-radius: 4px;
transition: background 0.3s;
}
.icon-menu button:hover {
background: #34495e;
}
</style>
<menu class="icon-menu">
<li><button title="Bold"><strong>B</strong></button></li>
<li><button title="Italic"><em>I</em></button></li>
<li><button title="Underline"><u>U</u></button></li>
<li><button title="Link">🔗</button></li>
</menu>Form Toolbar
Create a toolbar for a form with action buttons:
Example
<form>
<menu>
<li><button type="submit">Save</button></li>
<li><button type="button">Cancel</button></li>
<li><button type="reset">Reset</button></li>
</menu>
</form>Try it Yourself
Interactive Example
Here's a live example of a styled toolbar menu:
Menu vs UL Comparison
| Feature | <menu> | <ul> |
|---|---|---|
| Purpose | Interactive menus, toolbars, commands | Regular unordered lists |
| Semantic Meaning | Represents a menu of commands or options | Represents a list of items |
| Use Cases | Toolbar buttons, context menus, command lists | Navigation links, bullet lists, item lists |
| Accessibility | Announces as menu to screen readers | Announces as list to screen readers |
| ARIA Role | Implicit role="menu" (when appropriate) | Implicit role="list" |
| Default Styling | Similar to ul (block display, list style) | Block display with bullet points |
Best Practices
- Use
<menu>for toolbars and interactive command lists, not for regular navigation - Use
<ul>with<nav>for site navigation menus - Add ARIA roles when creating custom context menus (
role="menu",role="menuitem") - Use
<button>elements inside menu items for interactive commands - Ensure keyboard accessibility for menu items (Tab, Enter, Arrow keys)
- Provide visual feedback on hover and focus states
- Use semantic markup to improve screen reader support
- Consider fallback styling since
<menu>renders like<ul>by default - Group related menu items together for better usability
Accessibility Considerations
- Add
role="menubar"for top-level horizontal menus - Add
role="menu"for dropdown and context menus - Use
role="menuitem"for individual menu items - Include
aria-labeloraria-labelledbyto describe the menu - Implement keyboard navigation (Arrow keys, Enter, Escape)
- Ensure sufficient color contrast for menu items
- Provide focus indicators for keyboard users
Default CSS Settings
Most browsers will display the <menu> element with the following default values:
Default CSS
menu {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}