<menu>

Defines a semantic menu or toolbar

✨ HTML5

Definition 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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Approved-page light CSS-variable defaults are supplied: --bg-primary, --border-color. The snippet includes CSS inside its HTML.

<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

Approved-page light CSS-variable defaults are supplied: --bg-primary, --border-color. The snippet includes CSS inside its HTML.

<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:

Try in Code Playground

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-label or aria-labelledby to 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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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;
}

Related Tags

<ul>
Defines an unordered list
<nav>
Defines navigation links
<li>
Defines a list item
<a>
Defines a hyperlink
<button>
Defines a clickable button
<dialog>
Defines a dialog box