From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fmenu.html | 154 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 devdocs/html/element%2Fmenu.html (limited to 'devdocs/html/element%2Fmenu.html') diff --git a/devdocs/html/element%2Fmenu.html b/devdocs/html/element%2Fmenu.html new file mode 100644 index 00000000..2961f63f --- /dev/null +++ b/devdocs/html/element%2Fmenu.html @@ -0,0 +1,154 @@ +

<menu>: The Menu element

The <menu> HTML element is described in the HTML specification as a semantic alternative to <ul>, but treated by browsers (and exposed through the accessibility tree) as no different than <ul>. It represents an unordered list of items (which are represented by <li> elements).

+

Try it

+
+

Attributes

+

This element only includes the global attributes.

+

Usage notes

+
+

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.

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

+
+

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

HTML

+

html

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

+

html

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

CSS

+

css

+
menu,
+ul {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  width: 400px;
+}
+
+li {
+  flex-grow: 1;
+}
+
+button {
+  width: 100%;
+}
+
+

Result

+
+ + +
+
+

Technical summary

+
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

+
+ + +
Specification
HTML Standard
# the-menu-element
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
menu11216≤12.134.4184≤12.111.0
hr_separatorNoNo51–85NoNoNoNoNo51–85NoNoNo
labelNoNo8–85NoNoNoNoNo
8–85Nested menus are not supported.
NoNoNo
type_menuNo≤18–798–85NoNoNoNoNo
8–85Nested menus are not supported.
NoNoNo
+

See also

+
+

+ © 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 +

+
-- cgit v1.2.3