<menu>: Das Menu-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, jedoch von Browsern (und im Zugänglichkeitsbaum) nicht anders als <ul> behandelt. 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 akzeptiert auch die globalen Attribute.

compact

Dieses boolesche Attribut deutet darauf hin, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browserspezifisch. Verwenden Sie stattdessen CSS: Um einen ähnlichen Effekt wie das compact-Attribut zu erzielen, kann die CSS-Eigenschaft line-height mit einem Wert von 80% verwendet werden.

Nutzungshinweise

Die <menu>- und <ul>-Elemente repräsentieren beide eine ungeordnete Liste von Elementen. Der wesentliche Unterschied besteht darin, dass <ul> hauptsächlich Elemente zur Anzeige enthält, während <menu> eine Werkzeugleiste mit Befehlen darstellt, 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 wird als obsolet betrachtet und befindet sich nicht mehr in der Spezifikation.

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

Flussinhalt. Wenn die Kinder des Elements mindestens ein <li>-Element enthalten: greifbarer 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 Flussinhalt 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

Siehe auch

  • Andere HTML-Elemente im Zusammenhang mit Listen: <ol>, <ul>, und <li>.