<menu>: 메뉴 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015년 7월⁩.

HTML<menu> 요소는<ul>의 의미론적 대안으로 설명되지만, 브라우저에 의해서는<ul>과 다르지 않게 다루어집니다.<li> 요소들로 표현되는 항목들의 비정렬 목록을 나타냅니다.

시도해 보기

<div>  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>  <menu>    <li><button>Save for later</button></li>    <li><button>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;}

특성

이 요소는전역 특성만 포함합니다.

사용 일람

<menu>와<ul> 요소 모두 비정렬 목록을 표현합니다. 주요 차이점은<ul>이 주로 표시를 위한 항목들을 포함하는 반면,<menu>는 상호작용을 위한 항목들을 포함하도록 의도되어 있습니다. 관련된<menuitem> 요소는 사용이 중단되었습니다.

참고 :HTML 사양의 초기 버전에서는<menu> 요소가컨텍스트 메뉴로서 사용되는 사례가 있었습니다. 이 기능은 오래되었으며 사양에는 포함되어 있지 않습니다.

예시

툴바

이 예시에서는, 편집 앱을 위한 툴바를 생성하는 데에<menu>가 사용됩니다.

HTML

html

<menu>  <li><button>Copy</button></li>  <li><button>Cut</button></li>  <li><button>Paste</button></li></menu>

이는 기능적으로 다음과 다르지 않습니다.

html

<ul>  <li><button>Copy</button></li>  <li><button>Cut</button></li>  <li><button>Paste</button></li></ul>

CSS

css

menu,ul {  display: flex;  list-style: none;  padding: 0;  width: 400px;}li {  flex-grow: 1;}button {  width: 100%;}

결과

기술 요약

콘텐츠 카테고리	플로우 콘텐츠. 요소의 자식으로 적어도 한 개 이상의`<li>` 요소를 포함한다면:뚜렷한 콘텐츠.
가능한 콘텐츠	`<li>`와`<script>`,`<template>`가 0번 이상 존재할 수 있음.
태그 생략	불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소	플로우 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할	`list`
가능한 ARIA 역할	`directory`,`group`,`listbox`,`menu`,`menubar`,`none`,`presentation`,`radiogroup`,`tablist`,`toolbar` or`tree`
DOM 인터페이스	`HTMLMenuElement`