Navigation is a promise about where a click will lead. On a phone, the same promise has less room to explain itself. The aim is not to compress a desktop menu until it fits. It is to help someone understand where they are, what is available, and how to move forward without losing their place.
Use words people can predict
Choose labels that describe destinations. “Services”, “Our work”, and “Contact” are often easier to predict than internal team names or clever phrases. Personality can live in the surrounding design without making every navigation choice a puzzle.
Group pages by a visitor’s needs, not your organisation chart. If two pages answer nearly the same question, decide whether they need separate top-level links. A shorter menu is useful when it removes ambiguity, not when it hides essential information.
Make open and closed states clear
A menu control should show whether it is expanded and have a meaningful accessible name. When a mobile menu opens, give it enough space for easy selection. Keep the close control visible and support the Escape key where relevant.
Do not make hover the only way to reach a submenu. A person using a touchscreen or keyboard needs an equivalent route. If opening a menu covers other content, make it clear how to return to the page and avoid leaving invisible links in the keyboard path.
Keep motion in service of orientation
A small transition can explain that a panel belongs to a button. A header that returns on upward scrolling can make navigation available without permanently taking over the screen. But moving controls should not disappear while someone is using them.
Offer reduced-motion behaviour and keep transitions brief. The important state is the destination, not the animation in between. If an effect becomes difficult to understand at narrow widths, simplify it rather than shrinking it.
Test the whole trip
Try finding a service, opening a project, returning to the list, and starting an enquiry. Do this with touch and a keyboard. Check that focused links are visible, menu labels remain readable, and the browser’s Back button behaves sensibly.
Repeat the journey with long translated labels and larger text. Navigation that only works with short English words is not ready for a multilingual audience. A clear menu should give people confidence about the next step before they take it.
Before you build
- Use destination labels visitors understand.
- Support touch, keyboard, and visible focus.
- Keep open and close controls easy to reach.
- Test long labels, larger text, and Back navigation.