Mobile Navigation: Drawers, Bars and the Back Button

Mobile navigation works when the essentials stay within reach and behave predictably: search findable without opening anything, a menu drawer that lists categories in shopper language and closes cleanly, account and cart where thumbs and habits expect them, and a back button that returns visitors to where they were. It fails when a sticky bar eats the screen, a drawer becomes a maze of accordions, or the only route to a category is a search the visitor cannot yet phrase. Design for one hand, bright light and divided attention, because that is the real context of use.

A drawer should open fast, show the top-level categories plainly, and let visitors expand one section at a time without the whole list jumping. Include the practical links shoppers look for under pressure: delivery, returns, contact and help, placed below the shopping routes rather than competing with them. A close control must be obvious, and tapping outside should close the drawer without navigating away. If your drawer needs instructions, it is too complicated. Test it with the categories from your menu language work; a good container cannot rescue confusing labels.

A sticky header keeps search and cart available during a long scroll, at the cost of screen height on every page. It earns that cost on product and category pages where the next action is likely; it is harder to justify when it duplicates a header just scrolled past and shrinks the content to a slit. Bottom bars suit app-like stores with a few constant routes, but they can collide with browser controls and buying buttons. Whichever pattern you use, measure the remaining content area on a small phone and keep one pattern consistently, so returning visitors build a reliable habit.

Hiding search inside the drawer adds a step in front of your highest-intent visitors. A visible search icon, labelled or in the universally recognised form, should open a full, comfortable search field with suggestions that work by touch, as covered in autocomplete and suggestions. The opened search should be easy to cancel, returning the visitor to the exact page they were on. Check the keyboard behaviour: the field should focus, the right keyboard should appear, and the page should not jump so the field hides under the header at the moment of typing.

Navigation links need room. Crowded menu rows cause wrong taps, which on a slow connection cost real time and patience. Keep targets generously sized and separated, especially for close controls, filter buttons and the small links inside drawers. Place the most used actions where a thumb resting naturally can reach them, and avoid demanding precision at the very top corners for the main routes. Accessibility guidance in the sources gives the underlying principles. The field test is unforgiving and useful: if you mis-tap your own menu while walking, your customers are mis-tapping it too.

Mobile browsing is a chain of small departures and returns. The visitor leaves a list for a product, comes back, opens filters, closes them, checks the cart and returns to shopping. Each return should restore place and state: scroll position, filters, cart contents and the page they expected. Test these loops on the device, in the browser your customers use, because in-app browsers from social and email can behave differently from a standalone browser. A single loop that resets the category is enough to make the whole store feel unreliable on phones, whatever the desktop site does.

Keep a short script and run it after theme or app changes. One-handed, on a real phone: find a named product by search; find a different product by drawer and category; filter a large category; add to cart; go back and continue browsing; find help and returns. Time each journey loosely and note every hesitation, mis-tap and dead end. Fix those before debating colours or icon styles. Mobile navigation is mostly ergonomics, and ergonomics are discovered by hands, not by looking at a design file on a large monitor in a quiet room.