<menu>
Lista poleceń, na przykład pasek narzędzi z przyciskami. Działa jak `<ul>`.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<li>(dopuszczalne są też<script>i<template>)
Przykład
#<style>
.toolbar { display: flex; gap: 8px; padding: 0; list-style: none; }
</style>
<menu class="toolbar" aria-label="Akcje edytora">
<li><button type="button">Kopiuj</button></li>
<li><button type="button">Formatuj</button></li>
<li><button type="button">Uruchom</button></li>
</menu>Definicja i zastosowanie
#Element <menu> to semantyczna odmiana <ul> przeznaczona na listę poleceń, które użytkownik może wykonać: pasek narzędzi edytora, akcje pod komentarzem, przyciski „Kopiuj”, „Udostępnij”, „Usuń”. Pozycje zapisujesz w <li>, a w nich zwykle umieszczasz przyciski <button>.
Przeglądarki i technologie asystujące traktują <menu> tak samo jak <ul>: ma te same style domyślne i jest ogłaszany jako zwykła lista. Dawne pomysły na menu kontekstowe (atrybut type i element <menuitem>) zostały usunięte ze specyfikacji.
Mimo nazwy <menu> nie zamienia się w rozwijane menu i nie dostaje roli ARIA menu. Do nawigacji po stronie użyj <nav> z listą linków, a <menu> zostaw dla list poleceń.
Składnia
#<menu>
<li><button type="button">…</button></li>
</menu>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
menu {
display: block;
list-style-type: disc;
margin-block: 1em;
padding-inline-start: 40px;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie dodawaj
role="menu"tylko dlatego, że element nazywa się<menu>. Ta rola wymaga pełnej obsługi klawiatury (strzałki, Escape), której przeglądarka sama nie zapewni. - Jeśli pozycje są linkami do innych stron, to nawigacja: użyj
<nav>z listą<ul>.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.