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

Siehe auch

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