Mobile Navigation

01 — Foundation

On smaller screens, navigation must help users move confidently. They should always know how to open and close the menu, where they are, and what options exist — without fullscreen chaos or hidden interaction zones.

02 — Controls

button with “Menu” / “Navigation” — not an unlabeled icon alone
aria-expanded reflects open state; focus moves into the panel when opened
obvious close control and Escape to dismiss
real links inside nav — see Navigation and Buttons vs Links

This site uses a button with aria-expanded and aria-controls on small viewports, a sibling nav with real links, and site-header.is_open toggled in JavaScript — not details / summary for the main menu.

<button type="button" aria-expanded="false" aria-controls="site-nav">
    Menu
</button>
<nav id="site-nav" hidden>
    <!-- links -->
</nav>

03 — Structure

touch-friendly targets — minimum ~44px where possible
limit nesting; accordions for submenus with keyboard support — see Accordions
show current page — aria-current="page"
no hover-dependent behaviour — touch has no hover

04 — Avoid

never wrap the whole site menu in details / summary — it breaks desktop layout and fights responsive navigation; use a button plus nav and JavaScript (or a dedicated mobile-only pattern)
fullscreen navigation chaos with no clear hierarchy
excessive animation — respect reduced motion
trapping users without scroll or focus escape

05 — Review

open/close is obvious; keyboard and screen reader paths work
current location is clear; links are real and tappable
main menu uses button + nav — never details / summary for the whole site header
complements the Navigation pattern — not a conflicting second system

Mobile navigation should reduce effort

Open, close, and labelling

Calm structure on small screens

What to avoid

Before you approve