Building mobile navigation, almost everyone reaches for the hamburger. Space is short, so hide things — and with more than ten destinations that is entirely reasonable. But the choice has a cost, and making it knowingly produces a different result from making it by default.
What the hamburger actually costs
First, every destination becomes equally invisible. The page people visit constantly and the one they never open sit side by side behind the same tap. The difference in importance disappears from the screen.
Second, you have added a step: open, scan, tap. People fall out at each one. Third, the open panel covers the page, so context vanishes at exactly the moment a choice is required.
Four destinations or fewer? Do not hide them
In practice three or four destinations carry the traffic. If so, lay them out horizontally and let the overflow scroll sideways — a pill bar that flows off the edge on narrow screens, buildable in pure CSS.
One condition applies: the item at the right edge must be visibly cut in half. If the row ends flush, nobody knows there is more. What tells people a strip scrolls is not a label, it is the clipped shape.
With more destinations there is a middle path: show as many as fit and collapse the remainder behind a single “More”. The top three or four stay one tap away, and the long tail sits one step back.
A fixed bottom bar carries one action
The bottom of the screen is where a thumb reaches most easily, which makes it the right home for one important action — apply, enquire, buy, whatever this page exists to achieve. Fill it with menu items and it only eats screen.
Two implementation details matter. Add padding-bottom: env(safe-area-inset-bottom) so the bar clears the device’s home indicator, and reserve the bar’s height at the end of the content so the last paragraph is not permanently covered.
The toggle has to be a real button
Build the toggle from a <div> and it cannot be reached by keyboard, and assistive technology cannot read its state. Use a <button> and keep aria-expanded in step with the panel. If you would rather write no script at all, <details> with <summary> gives you a toggle that is keyboard-operable and announced correctly out of the box.
Navigation structure ties directly into how search traffic reaches you — that thread continues in the SEO archive, and front-end structure is part of the work in our optimization program.
Next part
The final part is about sticky elements. position: sticky says nothing when it fails, which is why working out why it will not stick can eat an afternoon.