<menu>: 메뉴 요소

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.

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

시도해보기

특성

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

사용 일람

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

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

예시

툴바

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

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>

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

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

결과

기술 요약

콘텐츠 카테고리

플로우 콘텐츠. 요소의 자식으로 적어도 한 개 이상의 <li> 요소를 포함한다면: 뚜렷한 콘텐츠.

가능한 콘텐츠

<li><script>, <template>가 0번 이상 존재할 수 있음.

태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할 list
가능한 ARIA 역할 directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree
DOM 인터페이스 HTMLMenuElement

명세

Specification
HTML Standard
# the-menu-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

  • 목록과 관련된 다른 HTML 요소들: <ol>, <ul>, and <li>.