Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Lijsten

Het element <menu>

Het <menu>-HTML-element wordt in de HTML-specificatie beschreven als een semantisch alternatief voor <ul>, maar wordt door browsers (en via de toegankelijkheidsboom) niet anders behandeld dan <ul>. Het stelt een ongeordende lijst van items voor (die worden weergegeven door <li>-elementen).

Code
<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>
Resultaat in de browser

Attributen

Dit element accepteert ook de globale attributen.

compact VerouderdDit Booleaanse attribuut suggereert dat de lijst compact moet worden weergegeven. De interpretatie van dit attribuut is browserspecifiek. Gebruik in plaats daarvan CSS: om een vergelijkbaar effect te bereiken als het compact-attribuut, kan de CSS-eigenschap line-height worden gebruikt met een waarde van 80%.

Gebruiksnotities

De elementen <menu> en <ul> stellen beide een ongeordende lijst van items voor. Het belangrijkste verschil is dat <ul> voornamelijk items bevat die bedoeld zijn om weergegeven te worden, terwijl <menu> een werkbalk voorstelt met opdrachten die de gebruiker kan uitvoeren of activeren.

Opmerking

In vroege versies van de HTML-specificatie had het <menu>-element ook een toepassing als contextmenu. Deze functionaliteit wordt als verouderd beschouwd en maakt geen deel meer uit van de specificatie.

Voorbeelden

Werkbalk

In dit voorbeeld wordt een <menu> gebruikt om een werkbalk voor een bewerkingstoepassing te maken.

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>

Merk op dat dit functioneel niet verschilt van:

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

Resultaat

Resultaat in de browser

Technische samenvatting

Inhoudscategorieën

Flow-inhoud. Als de kinderen van het element ten minste één <li>-element bevatten: palpabele inhoud.

Toegestane inhoud

Nul of meer voorkomens van <li>, <script>, en <template>.

Weglaten van tags Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane ouders Elk element dat flow-inhoud accepteert.
Impliciete ARIA-rol list
Toegestane ARIA-rollen directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar of tree
DOM-interface HTMLMenuElement

Zie ook

Verwante elementen