Design Mobile Navigation That Helps People Keep Their Place

Mobile navigation needs to work when the screen is narrow, the user is interrupted, and the page contains more content than fits at once. A menu should make the structure easier to understand without taking away the user's sense of where they are.

Prioritise the routes people need

Begin with the most important pages and use short, descriptive labels. Group related services under a clear heading. If a group contains many links, make sure its structure remains understandable when only part of the menu is visible. Do not rely on a desktop hover interaction to reveal essential links on touch devices.

Design the open and closed states together

The menu button should communicate whether navigation is open and offer a clear way to close it. Check what happens when a visitor selects the page they are already on, taps outside the panel, rotates the device, or uses the keyboard. These details are part of the interaction, not optional polish.

When a panel behaves as a modal, implement focus management appropriate to that pattern. When it is a simple expandable navigation region, keep its keyboard behaviour consistent with that structure. Hidden links should not remain available as unexplained tab stops.

Keep movement purposeful

A short transition can show where a panel came from and make the state change easier to follow. Avoid delaying access to links with a long entrance sequence. Respect reduced-motion preferences and ensure the menu remains understandable without animation.

Test beyond a screenshot

Open the menu on a short viewport, scroll its full contents, and check that the close control remains reachable. Test long service names, enlarged text, touch input, and keyboard input. After closing, confirm that the page can scroll normally again. The useful measure is whether someone can reach the intended page and continue their task without losing control of the interface.