<menu>: Das Menü-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <menu>-HTML-Element wird in der HTML-Spezifikation als semantische Alternative zu <ul> beschrieben, aber von Browsern (und durch den Accessibility-Baum) nicht anders behandelt als <ul>. Es repräsentiert eine ungeordnete Liste von Elementen (die durch <li>-Elemente dargestellt werden).

Probieren Sie es aus

Attribute

Dieses Element umfasst nur die globalen Attribute.

Verwendungshinweise

Die <menu>- und <ul>-Elemente repräsentieren beide eine ungeordnete Liste von Elementen. Der Hauptunterschied besteht darin, dass <ul> hauptsächlich Elemente zur Anzeige enthält, während <menu> für interaktive Elemente gedacht war.

Hinweis: In frühen Versionen der HTML-Spezifikation hatte das <menu>-Element einen zusätzlichen Verwendungszweck als Kontextmenü. Diese Funktionalität wird als veraltet betrachtet und ist nicht in der Spezifikation enthalten.

Beispiele

Werkzeugleiste

In diesem Beispiel wird ein <menu> verwendet, um eine Werkzeugleiste für eine Bearbeitungsanwendung zu erstellen.

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>

Beachten Sie, dass dies funktional nicht anders ist als:

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

Ergebnis

Technische Zusammenfassung

Inhaltskategorien

Flow-Inhalt. Wenn die Kinder des Elements mindestens ein <li>-Element enthalten: Tastbarer Inhalt.

Zulässiger Inhalt

Null oder mehr Vorkommen von <li>, <script> und <template>.

Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Zulässige Eltern Jedes Element, das Flow-Inhalt akzeptiert.
Implizite ARIA-Rolle list
Zulässige ARIA-Rollen directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar oder tree
DOM-Schnittstelle [`HTMLMenuElement`](/de/docs/Web/API/HTMLMenuElement)

Spezifikationen

Specification
HTML
# the-menu-element

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
menu

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch