Menu Button
메뉴 버튼
메뉴 버튼은 작업이나 선택 목록을 엽니다. 메뉴가 열려 있는지 여부를 소프트웨어에 알립니다.
실제 예시
문서 편집기에서 “내보내기”를 선택하면 PDF, DOCX, Markdown 옵션이 열립니다. 아래쪽 화살표는 메뉴를 열고 첫 번째 항목에 포커스를 맞춥니다; Esc는 메뉴를 닫고 포커스를 반환합니다. PDF를 선택하면 한 번의 내보내기가 시작되며, 계속 유지되는 설정은 아닙니다.
주요 부분
- 01트리거 버튼
- 02팝업 메뉴
- 03메뉴 항목
사용할 때
모든 버튼을 표시하면 페이지가 복잡해질 때 소규모 명령 그룹에 사용하세요. 전체 메뉴 키보드 동작을 포함하세요.
다음 경우에는 사용하지 마세요
일반 사이트 링크나 값을 보내는 폼 필드에 메뉴 역할을 사용하지 마세요.
코드에서 사용된 이름
button aria-haspopup=menu aria-expanded + role=menu/menuitem 출시하기 전에
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome：Complete the task with 메뉴 버튼 (Menu Button)。 User context：문서 편집기에서 “내보내기”를 선택하면 PDF, DOCX, Markdown 옵션이 열립니다. 아래쪽 화살표는 메뉴를 열고 첫 번째 항목에 포커스를 맞춥니다; Esc는 메뉴를 닫고 포커스를 반환합니다. PDF를 선택하면 한 번의 내보내기가 시작되며, 계속 유지되는 설정은 아닙니다. Recommended pattern：메뉴 버튼 (Menu Button)。 Why it fits：모든 버튼을 표시하면 페이지가 복잡해질 때 소규모 명령 그룹에 사용하세요. 전체 메뉴 키보드 동작을 포함하세요. Do not use it when：일반 사이트 링크나 값을 보내는 폼 필드에 메뉴 역할을 사용하지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 메뉴 버튼 (Menu Button) is used now. Definition: 메뉴 버튼은 작업이나 선택 목록을 엽니다. 메뉴가 열려 있는지 여부를 소프트웨어에 알립니다. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.