Hamburger Menu
햄버거 메뉴
가로줄이 세 개인 메뉴 버튼이에요. 공간이 좁아서 메뉴를 다 보여줄 수 없을 때 누르면 메뉴가 열려요.
실제 예시
좁은 쇼핑 페이지에서는 라벨이 붙은 메뉴 버튼이 카테고리, 계정, 도움말을 엶. 드로어는 포커스를 내부에 유지함.
주요 부분
- 01Current location
- 02Destination labels
- 03Focus order
- 04Responsive behavior
사용할 때
가장 중요한 목적지를 항상 보이게 한 후 작은 화면에서 사용하세요.
다음 경우에는 사용하지 마세요
넓은 화면에서 모든 내비게이션을 숨기지 마세요. 아이콘에도 접근 가능한 이름과 확장 상태가 필요합니다.
코드에서 사용된 이름
button aria-controls aria-expanded + nav 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 햄버거 메뉴 (Hamburger Menu)。 User context：좁은 쇼핑 페이지에서는 라벨이 붙은 메뉴 버튼이 카테고리, 계정, 도움말을 엶. 드로어는 포커스를 내부에 유지함. Recommended pattern：햄버거 메뉴 (Hamburger Menu)。 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 햄버거 메뉴 (Hamburger Menu) is used now. Definition: 가로줄이 세 개인 메뉴 버튼이에요. 공간이 좁아서 메뉴를 다 보여줄 수 없을 때 누르면 메뉴가 열려요. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.