HTML <menu> Tag

The <menu> tag represents an unordered list of items, just like <ul>, but with a more specific semantic meaning: it describes a toolbar or a list of interactive commands that the user can perform. Each item is written as an <li> element.

The <menu> element is not obsolete. It is a current, valid element in the HTML Living Standard. Browsers render it the same way they render a <ul> — as a block-level, bulleted list — and it carries the same content model. The difference is purely semantic: reach for <menu> when the list is a set of commands or controls (for example, a row of toolbar buttons), and use <ul> for ordinary content lists.

Info

What was removed from the standard is the context-menu feature: the type="context", type="toolbar", type="popup", and label attributes, together with the companion <menuitem> element. Those no longer exist in any modern browser. The <menu> element itself remains valid — only those extra attributes and <menuitem> are gone. To build a custom context menu today, use CSS and JavaScript instead.

When to use `<menu>`

Use <ul> for general content lists — navigation links, feature lists, steps, or any ordinary bulleted content. For site navigation, wrap that list in a <nav> element.
Reach for <menu> only when the semantic intent is a toolbar or a list of commands, such as a group of action buttons (Cut, Copy, Paste) that act on the current document or selection.

Because assistive technologies do not yet expose <menu> differently from <ul>, the practical benefit today is readability of your markup for other developers. For accessibility, give a command toolbar a descriptive aria-label.

Syntax

The <menu> tag comes in pairs. The content is written between the opening (<menu>) and closing (</menu>) tags.

Example of the HTML `<menu>` tag with `<li>` elements:

HTML <menu> Tag Example

By default, browsers render <menu> exactly like an <ul> — as a bulleted list. The styles below simply remove the bullets and add spacing.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: block;
        list-style: none;
        padding: 0;
      }
      menu li {
        display: block;
        padding: 5px;
        border: 1px solid #ccc;
        margin-bottom: 2px;
      }
    </style>
  </head>
  <body>
    <menu>
      <li>ol - ordered list</li>
      <li>ul - unordered list</li>
      <li>menu - menu list</li>
    </menu>
  </body>
</html>

Try it Yourself »

Result

Example of an accessible toolbar with `<menu>`:

This is the case <menu> was designed for: a list of commands. The buttons are real <button> elements (so they are keyboard-focusable and announced as buttons), and the toolbar carries an aria-label so screen-reader users know what the group does.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      menu {
        display: flex;
        gap: 10px;
        list-style: none;
        padding: 10px;
        margin: 0;
        background: #f0f0f0;
        border: 1px solid #ccc;
      }
      menu button {
        padding: 8px 12px;
        background: #1c87c9;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <menu aria-label="Text formatting">
      <li><button type="button" onclick="alert('Bold')">Bold</button></li>
      <li><button type="button" onclick="alert('Italic')">Italic</button></li>
      <li><button type="button" onclick="alert('Underline')">Underline</button></li>
    </menu>
  </body>
</html>

Try it Yourself »

The difference between the `<menu>` and `<ul>` tags

The <menu> and <ul> elements behave identically in the browser: both render an unordered list, and both contain <li> items. The only difference is semantic intent. <menu> signals that the list is a toolbar or a set of commands, while <ul> is for ordinary content lists. When in doubt, use <ul> — it is the more general element and is universally understood.

Attributes

The <menu> element has no element-specific attributes. The older type (with context, toolbar, and popup values), label, and the companion <menuitem> element were removed from the standard and no longer work in browsers.

The <menu> tag supports the Global attributes and the Event Attributes. For a command toolbar, add an aria-label (a global attribute) to describe the group of commands.

Practice

What is the current status of the '<menu>' element in the HTML standard?

It is obsolete and has been removed from every modern browser.It is a valid Living Standard element that represents an unordered list of commands or a toolbar.It only works in older versions of Firefox.It requires the '<menuitem>' element to function.

When to use <menu>