Skip to main content
UI Patterns

Mobile Navigation

Hamburger menus need: button trigger (not div) with aria-expanded, focus trap when open, Escape to close, focus returns to trigger. Content behind the menu should be inert when open.

In plain terms

The menu button on mobile must work by keyboard, say whether it's open, and close with the Escape key.

Why this matters

Mobile menus built from non-button elements can't be opened by keyboard or announced properly, and ones that don't trap focus let keyboard users wander into the hidden page behind them.

How to detect

Quick check

Tab to the menu button: is it a real <button> with aria-expanded? When open, does Escape close it, does focus stay within, and does it return to the button afterwards? Is the background content inert?