Hamburger Menu
Menú hamburguesa
Un botón de menú con tres líneas. Abre la navegación principal del sitio cuando no hay suficiente espacio para mostrarla.
Un ejemplo real
En una página de tienda estrecha, el botón de Menú etiquetado abre categorías, cuenta y ayuda. El cajón mantiene el enfoque dentro.
Partes principales
- 01Current location
- 02Destination labels
- 03Focus order
- 04Responsive behavior
Úsalo cuando
Úselo en pantallas pequeñas después de mantener visibles los destinos más importantes.
No lo uses cuando
No escondas toda la navegación en pantallas anchas. El icono también necesita un nombre accesible y un estado expandido.
Nombre usado en código
button aria-controls aria-expanded + nav Antes de lanzarlo
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 Menú hamburguesa (Hamburger Menu). User context: En una página de tienda estrecha, el botón de Menú etiquetado abre categorías, cuenta y ayuda. El cajón mantiene el enfoque dentro. Recommended pattern: Menú hamburguesa (Hamburger Menu). Why it fits: Úselo en pantallas pequeñas después de mantener visibles los destinos más importantes. Do not use it when: No escondas toda la navegación en pantallas anchas. El icono también necesita un nombre accesible y un estado expandido. 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): Esto no es un estándar normativo. Su nombre, límites y comportamiento esperado pueden cambiar de una fuente a otra. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Menú hamburguesa (Hamburger Menu) is used now. Definition: Un botón de menú con tres líneas. Abre la navegación principal del sitio cuando no hay suficiente espacio para mostrarla. 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.