<menu>: The Menu element #

NASA’s Webb Delivers Deepest Infrared Image of Universe Yet

Save for later

Share this news

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} .news { background-color: bisque; padding: 1em; border: solid thin black; }

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element only includes the global attributes. :::

Usage notes #

::: section-content The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items. The related <menuitem> element has been deprecated.

::: {#sect1 .notecard .note} Note: In early versions of the HTML specification, the <menu> element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification. ::: :::

Examples #

Toolbar #

::: section-content In this example, a <menu> is used to create a toolbar for an editing application.

HTML #

::: code-example [html]{.language-name}

<menu>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</menu>

:::

Note that this is functionally no different from:

::: code-example [html]{.language-name}

<ul>
  <li><button onclick="copy()">Copy</button></li>
  <li><button onclick="cut()">Cut</button></li>
  <li><button onclick="paste()">Paste</button></li>
</ul>

:::

CSS #

::: code-example [css]{.language-name}

menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categories	Flow content. If the element's children include at least one <li> element: Palpable content.
Permitted content	Zero or more occurrences of <li>, <script>, and <template>.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	list
Permitted ARIA roles	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree
DOM interface	HTMLMenuElement

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-menu-element]{.small}

---

:::

Browser compatibility #

::: _table #

               Desktop                                                   Mobile                                              

---

               Chrome    Edge      Firefox   Internet   Opera   Safari   WebView   Chrome    Firefox for  Opera     Safari   Samsung
                                             Explorer                    Android   Android   Android      Android   on IOS   Internet

menu 1 12 1 6 ≤12.1 3 4.4 18 4 ≤12.1 1 1.0

hr_separator No No 51–85 No No No No No 51–85 No No No

label No No 8–85 No No No No No 8–85 No No No

                                                                                             Nested menus                    
                                                                                             are not                         
                                                                                             supported.                      

type_menu No ≤18–79 8–85 No No No No No 8–85 No No No

                                                                                             Nested menus                    
                                                                                             are not                         
                                                                                             supported.                      

---

:::

See also #

::: section-content

• Other list-related HTML Elements: <ol>, <ul>, and <li>. :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu{._attribution-link} :::