Menu

Menu는 버튼, 아바타, 아이콘 같은 트리거 컴포넌트와 상호작용할 때 표시되는 숨겨진 옵션 목록이에요. 클릭하면 옵션들이 펼쳐지는 작은 목록이라고 보면 돼요.

보통 메뉴의 옵션은 즉시 액션을 시작하거나 사람들을 새 컨텍스트로 이동시켜요. 사람들로부터 정보를 수집해야 한다면 대신 select, dropdown, 또는 combobox를 시도해 보세요.

출처: Menu 문서

본문

Types (유형)

Default (기본) — 기본 메뉴 옵션은 각 메뉴 항목을 액션을 시작하는 버튼으로 취급해요.

Checkbox (체크박스) — 체크박스 메뉴 옵션은 목록을 여러 기준으로 필터링할 때처럼, 메뉴에서 여러 항목을 선택할 수 있게 해 줘요.

Radio (라디오) — 라디오 메뉴 옵션은 목록을 하나의 기준으로 정렬하거나 텍스트 서식 스타일을 적용할 때처럼, 설정을 켜거나 끄는 메뉴 항목 하나를 선택할 수 있게 해 줘요.

Layout (레이아웃)

Grouping options (옵션 그룹화)

메뉴의 옵션은 의미 있는 순서로 나열되어야 해요. 예를 들어 가장 빈번한 액션을 앞에, 가장 위험한 액션을 뒤에 두는 식이에요.

그룹을 만들어 훑어보기 쉽게 하세요. 그룹 사이에 더 많은 시각적 구분을 위해 divider(구분선)를 사용하세요.

Behavior (동작)

Text wrapping (텍스트 줄바꿈)

메뉴의 최대 폭은 300픽셀이에요. 기본적으로 긴 라벨을 가진 메뉴 항목은 이 폭을 넘으면 다음 줄로 줄바꿈돼요. 긴 목록을 훑어볼 때 한 메뉴 항목이 여러 줄에 걸치면 혼란을 일으킬 수 있으므로 긴 라벨을 피하세요.

Submenus (하위 메뉴)

때로는 메뉴의 옵션이 새 하위 메뉴에서 추가 관련 옵션을 열 수 있어요. 이런 시나리오에서는 스크린 리더를 사용하는 사람들을 위해 트리거 컴포넌트에 aria-label을 추가하세요.

메뉴를 너무 많이 중첩하는 것은 호출하기 어렵고 원래 맥락을 기억하기 어렵게 만들 수 있으므로 가능하면 피하는 것이 가장 좋아요.

Content (콘텐츠)

Labels (라벨)

메뉴 항목 라벨을 간결하게 유지하세요. 액션을 트리거하는 메뉴 항목에는, 사람들이 그 항목을 선택하면 무슨 일이 일어날지 반영하는 동사를 사용하세요.

옵션이나 설정을 나타내는 메뉴 항목에는 명사나 짧은 문구가 가장 좋아요. 문장형 대문자 표기(sentence style capitalization)를 사용하고 마침표를 생략하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization와 Periods를 참고하세요.

Secondary content (보조 콘텐츠)

보조 콘텐츠 슬롯은 메뉴에서 항목을 선택하는 것과 같은 결과를 가져올 키보드 단축키를 제공하는 데만 사용해야 해요. 자세한 내용은 Microsoft Writing Style Guide의 Keys and keyboard shortcuts를 참고하세요.

더 알아보기 (Learn more)

Menu 스토리북 및 React/Web Components 가이드 확인
정보 수집에는 select·dropdown·combobox를 함께 참고하세요
Microsoft Writing Style Guide: Capitalization, Periods