<menu> - Menu Element

The `<menu>` Element

Block-level HTML5

The <menu> element represents a list of commands or options that can be performed or activated by the user. In modern HTML, it’s semantically equivalent to <ul> but carries specific connotations for command menus and toolbars.

Quick Example

<menu>
<li><button>New</button></li>
<li><button>Open</button></li>
<li><button>Save</button></li>
<li><button>Close</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<menu>
<li><button>New</button></li>
<li><button>Open</button></li>
<li><button>Save</button></li>
<li><button>Close</button></li>
</menu>

Syntax

<menu>
  <li>Menu item</li>
  <li>Another menu item</li>
</menu>

The <menu> element contains <li> elements, similar to <ul> and <ol>.

Attributes

type Attribute (Deprecated)

Global Attributes

The <menu> element supports all global attributes like id, class, style, and role.

<menu id="file-menu" class="app-menu" role="menu">
  <!-- Menu items -->
</menu>

Common Use Cases

<nav>
<menu style="list-style: none; padding: 0; display: flex; gap: 1rem; background: #f3f4f6; padding: 1rem; margin: 0;">
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">File</button></li>
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">Edit</button></li>
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">View</button></li>
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">Help</button></li>
</menu>
</nav>

Result

Interactive code playground requires JavaScript. Here's the code:

<nav>
<menu style="list-style: none; padding: 0; display: flex; gap: 1rem; background: #f3f4f6; padding: 1rem; margin: 0;">
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">File</button></li>
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">Edit</button></li>
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">View</button></li>
  <li><button style="padding: 0.5rem 1rem; border: none; background: #3b82f6; color: white; border-radius: 4px; cursor: pointer;">Help</button></li>
</menu>
</nav>

<menu style="list-style: none; padding: 0; display: flex; gap: 0.5rem; background: white; border: 1px solid #e5e7eb; padding: 0.5rem; border-radius: 4px; margin: 0;">
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">✂️ Cut</button></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">📋 Copy</button></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">📄 Paste</button></li>
<li style="border-left: 1px solid #e5e7eb; margin: 0 0.5rem;"></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">↶ Undo</button></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">↷ Redo</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<menu style="list-style: none; padding: 0; display: flex; gap: 0.5rem; background: white; border: 1px solid #e5e7eb; padding: 0.5rem; border-radius: 4px; margin: 0;">
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">✂️ Cut</button></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">📋 Copy</button></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">📄 Paste</button></li>
<li style="border-left: 1px solid #e5e7eb; margin: 0 0.5rem;"></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">↶ Undo</button></li>
<li><button style="padding: 0.5rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; cursor: pointer;">↷ Redo</button></li>
</menu>

Command List

<h3>Available Commands</h3>
<menu style="list-style: none; padding: 0; margin: 0;">
<li style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
  <button style="border: none; background: none; color: #3b82f6; cursor: pointer;">Run Tests</button>
  <span style="color: #6b7280; margin-left: 1rem;">Ctrl+T</span>
</li>
<li style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
  <button style="border: none; background: none; color: #3b82f6; cursor: pointer;">Build Project</button>
  <span style="color: #6b7280; margin-left: 1rem;">Ctrl+B</span>
</li>
<li style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
  <button style="border: none; background: none; color: #3b82f6; cursor: pointer;">Deploy</button>
  <span style="color: #6b7280; margin-left: 1rem;">Ctrl+D</span>
</li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>Available Commands</h3>
<menu style="list-style: none; padding: 0; margin: 0;">
<li style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
  <button style="border: none; background: none; color: #3b82f6; cursor: pointer;">Run Tests</button>
  <span style="color: #6b7280; margin-left: 1rem;">Ctrl+T</span>
</li>
<li style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
  <button style="border: none; background: none; color: #3b82f6; cursor: pointer;">Build Project</button>
  <span style="color: #6b7280; margin-left: 1rem;">Ctrl+B</span>
</li>
<li style="padding: 0.75rem; border-bottom: 1px solid #e5e7eb;">
  <button style="border: none; background: none; color: #3b82f6; cursor: pointer;">Deploy</button>
  <span style="color: #6b7280; margin-left: 1rem;">Ctrl+D</span>
</li>
</menu>

Commands, actions, and interactive options:

<menu style="list-style: none; padding: 0; margin: 0;">
<li><button>Create New Document</button></li>
<li><button>Open Existing File</button></li>
<li><button>Save Current Work</button></li>
<li><button>Export as PDF</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<menu style="list-style: none; padding: 0; margin: 0;">
<li><button>Create New Document</button></li>
<li><button>Open Existing File</button></li>
<li><button>Save Current Work</button></li>
<li><button>Export as PDF</button></li>
</menu>

Use ul For…

General lists without specific actions:

<ul>
<li>HTML - Markup Language</li>
<li>CSS - Styling Language</li>
<li>JavaScript - Programming Language</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li>HTML - Markup Language</li>
<li>CSS - Styling Language</li>
<li>JavaScript - Programming Language</li>
</ul>

<style>
.menu-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background: #1f2937;
  gap: 1px;
}
.menu-bar li {
  flex: 1;
}
.menu-bar button {
  width: 100%;
  padding: 1rem;
  border: none;
  background: #374151;
  color: white;
  cursor: pointer;
  font-weight: 500;
}
.menu-bar button:hover {
  background: #4b5563;
}
</style>

<menu class="menu-bar">
<li><button>Dashboard</button></li>
<li><button>Projects</button></li>
<li><button>Team</button></li>
<li><button>Settings</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.menu-bar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background: #1f2937;
  gap: 1px;
}
.menu-bar li {
  flex: 1;
}
.menu-bar button {
  width: 100%;
  padding: 1rem;
  border: none;
  background: #374151;
  color: white;
  cursor: pointer;
  font-weight: 500;
}
.menu-bar button:hover {
  background: #4b5563;
}
</style>

<menu class="menu-bar">
<li><button>Dashboard</button></li>
<li><button>Projects</button></li>
<li><button>Team</button></li>
<li><button>Settings</button></li>
</menu>

<style>
.command-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  max-width: 300px;
}
.command-menu li button {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: white;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.command-menu li:last-child button {
  border-bottom: none;
}
.command-menu li button:hover {
  background: #f9fafb;
}
</style>

<menu class="command-menu">
<li><button>⚙️ Settings</button></li>
<li><button>👤 Profile</button></li>
<li><button>🔔 Notifications</button></li>
<li><button>❓ Help</button></li>
<li><button style="color: #dc2626;">🚪 Logout</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.command-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  max-width: 300px;
}
.command-menu li button {
  width: 100%;
  padding: 0.75rem 1rem;
  border: none;
  background: white;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.command-menu li:last-child button {
  border-bottom: none;
}
.command-menu li button:hover {
  background: #f9fafb;
}
</style>

<menu class="command-menu">
<li><button>⚙️ Settings</button></li>
<li><button>👤 Profile</button></li>
<li><button>🔔 Notifications</button></li>
<li><button>❓ Help</button></li>
<li><button style="color: #dc2626;">🚪 Logout</button></li>
</menu>

<style>
.icon-toolbar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.25rem;
  background: #f3f4f6;
  padding: 0.5rem;
  border-radius: 8px;
}
.icon-toolbar button {
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
}
.icon-toolbar button:hover {
  background: #e5e7eb;
}
</style>

<menu class="icon-toolbar">
<li><button>💾</button></li>
<li><button>📄</button></li>
<li><button>🖨️</button></li>
<li><button>✂️</button></li>
<li><button>📋</button></li>
<li><button>📌</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.icon-toolbar {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.25rem;
  background: #f3f4f6;
  padding: 0.5rem;
  border-radius: 8px;
}
.icon-toolbar button {
  width: 40px;
  height: 40px;
  border: none;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.2rem;
}
.icon-toolbar button:hover {
  background: #e5e7eb;
}
</style>

<menu class="icon-toolbar">
<li><button>💾</button></li>
<li><button>📄</button></li>
<li><button>🖨️</button></li>
<li><button>✂️</button></li>
<li><button>📋</button></li>
<li><button>📌</button></li>
</menu>

Accessibility

Use Proper ARIA Roles

For interactive menus, use appropriate ARIA roles:

<menu role="menubar">
  <li role="none">
    <button role="menuitem">File</button>
  </li>
  <li role="none">
    <button role="menuitem">Edit</button>
  </li>
  <li role="none">
    <button role="menuitem">View</button>
  </li>
</menu>

Ensure menu items are keyboard accessible:

<menu style="list-style: none; padding: 0; margin: 0;">
<li><button tabindex="0">First Command (Tab to focus)</button></li>
<li><button tabindex="0">Second Command</button></li>
<li><button tabindex="0">Third Command</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<menu style="list-style: none; padding: 0; margin: 0;">
<li><button tabindex="0">First Command (Tab to focus)</button></li>
<li><button tabindex="0">Second Command</button></li>
<li><button tabindex="0">Third Command</button></li>
</menu>

Screen readers announce menus similarly to lists:

<!-- Screen reader: "List, 3 items. Button, New. Button, Open. Button, Save." -->
<menu>
  <li><button>New</button></li>
  <li><button>Open</button></li>
  <li><button>Save</button></li>
</menu>

Best Practices

<menu>
  <li><button>Start Game</button></li>
  <li><button>Load Save</button></li>
  <li><button>Settings</button></li>
</menu>

<ul>
  <li>Game Features</li>
  <li>Graphics Quality</li>
  <li>Sound Options</li>
</ul>

<h3>File Operations</h3>
<menu style="list-style: none; padding: 0; margin: 0 0 1.5rem 0;">
<li><button>New File</button></li>
<li><button>Open File</button></li>
<li><button>Save File</button></li>
</menu>

<h3>Edit Operations</h3>
<menu style="list-style: none; padding: 0; margin: 0;">
<li><button>Undo</button></li>
<li><button>Redo</button></li>
<li><button>Find & Replace</button></li>
</menu>

Result

Interactive code playground requires JavaScript. Here's the code:

<h3>File Operations</h3>
<menu style="list-style: none; padding: 0; margin: 0 0 1.5rem 0;">
<li><button>New File</button></li>
<li><button>Open File</button></li>
<li><button>Save File</button></li>
</menu>

<h3>Edit Operations</h3>
<menu style="list-style: none; padding: 0; margin: 0;">
<li><button>Undo</button></li>
<li><button>Redo</button></li>
<li><button>Find & Replace</button></li>
</menu>

Context Menus (Historical)

Browser Support

Browser	Version	Notes
Chrome	1+	Treated as `<ul>`
Firefox	1+	Treated as `<ul>`
Safari	1+	Treated as `<ul>`
Edge	12+	Treated as `<ul>`
IE	6+	Treated as `<ul>`

The <menu> element is supported in all browsers but behaves identically to <ul>. Context menu features are not supported.

Unordered list for general purposes. Learn more →

List item in menu, ul, or ol. Learn more →

<menu> - Menu Element

The `<menu>` Element

Quick Example

Syntax

Attributes

type Attribute (Deprecated)

Global Attributes

Common Use Cases

Application Menu

Command List

Menu vs UL: When to Use Each

Use menu For…

Use ul For…

Styling Menu Elements

Horizontal Menu Bar

Vertical Command Menu

Accessibility

Use Proper ARIA Roles

Keyboard Navigation

Best Practices

Use for Interactive Commands

Context Menus (Historical)

Browser Support

Specifications

<menu> - Menu Element

The <menu> Element

Quick Example

Syntax

Attributes

type Attribute (Deprecated)

Global Attributes

Common Use Cases

Application Menu

Toolbar Actions

Command List

Menu vs UL: When to Use Each

Use menu For…

Use ul For…

Styling Menu Elements

Horizontal Menu Bar

Vertical Command Menu

Icon Toolbar

Accessibility

Use Proper ARIA Roles

Keyboard Navigation

Screen Reader Behavior

Best Practices

Use for Interactive Commands

Group Related Actions

Context Menus (Historical)

Browser Support

Related Elements

Specifications

The `<menu>` Element