Build an accessible mobile navigation menu

Keep the site links in a nav landmark and let the desktop layout expose them normally. The mobile trigger should be a button with aria-expanded and aria-controls. If JavaScript fails, choose a fallback that still leaves important destinations reachable rather than permanently hiding the list.

The button label should explain the action, such as “Open navigation,” while the icon remains decorative. Update the expanded state immediately when the panel changes and avoid adding role="menu" to ordinary site navigation; menu semantics imply a desktop-application keyboard model most websites do not need.

                      <button aria-expanded="false" aria-controls="mobile-nav">Open navigation</button>
<nav id="mobile-nav" aria-label="Primary">…</nav>
                    

A compact panel that expands below the header can remain a normal disclosure: focus stays on the trigger and users Tab into the links. A full-screen drawer that visually blocks the page acts more like a modal and needs background isolation, contained focus, and deliberate restoration.

Do not mix the two models. A panel that looks modal but lets keyboard focus disappear behind it is confusing, while a small dropdown with an aggressive focus trap becomes cumbersome. Let the visual level of interruption determine the interaction contract.

Support Escape and a visible close button. Close after a navigation link is activated, and close when a breakpoint change restores the desktop navigation so hidden state cannot linger. If users dismiss the drawer, return focus to its trigger; a completed navigation will naturally move focus with the new page.

Lock page scrolling only for a modal drawer, and preserve the current scroll position. Avoid translating the entire document off canvas because hidden transformed content can create horizontal overflow and unexpected touch behavior.

• Escape closes the open panel.
• Breakpoint changes reset stale mobile state.
• The page never gains horizontal overflow.

Give the trigger and every navigation link a comfortable touch target, allow labels to wrap, and test at 200% zoom. A drawer should remain operable in landscape orientation and when browser chrome reduces the available viewport height.

Use a short transform or opacity transition only when it clarifies where the panel came from. Under reduced motion, remove the traveling animation and reveal the panel immediately. The navigation hierarchy and focus indicator must remain equally clear without movement.