<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.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

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

Probieren Sie es aus

<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>

.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

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

Attribute

Dieses Element enthält nur die globalen Attribute.

Gebrauchshinweise

Die <menu>- und <ul>-Elemente stellen beide eine ungeordnete Liste von Elementen dar. Der Hauptunterschied besteht darin, dass <ul> hauptsächlich Elemente zur Anzeige enthält, während <menu> eine Symbolleiste darstellt, die Befehle enthält, die der Benutzer ausführen oder aktivieren kann.

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

Beispiele

Symbolleiste

In diesem Beispiel wird ein <menu> verwendet, um eine Symbolleiste 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

Fließinhalte. Wenn die Kinder des Elements mindestens ein <li>-Element enthalten: Handfeste Inhalte.

Erlaubte Inhalte

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

Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Fließinhalte akzeptiert.
Implizierte 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
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
menu

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

Full support

Siehe auch

  • Andere listenbezogene HTML-Elemente: <ol>, <ul>, und <li>.