<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 Standard
# the-menu-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch