Responsive navigation: when the full menu should collapse

Key takeaways

Responsive navigation should show the full menu for as long as it fits, then collapse into a labelled menu button, keeping the logo, the main action and any key tools visible. Collapse based on when your menu stops fitting, not at a fixed device width. The links behind the button should match the desktop menu exactly.

• Show the full menu as long as it fits cleanly.
• Collapse into a button labelled 'Menu', not an icon alone.
• Keep the logo, main action and basket visible on phones.
• Same links in the same order on every screen size.

What is responsive navigation?

Responsive navigation is a menu that adapts its layout to the screen size, so it stays usable from a large desktop to a small phone. The links stay the same; the presentation changes. Common patterns are a full horizontal menu on wide screens and a collapsible menu behind a button on narrow ones.

• How clear website navigation improves user experience
• Make your website work properly on mobile

When should the menu collapse?

Collapse when the full menu stops fitting on one line beside the logo and header action, and not before. Collapsing too early hides the menu on laptops and tablets that could show it. Collapsing too late squeezes items until they wrap or overlap. Find the width by resizing the browser slowly.

• Hamburger menus on desktop: why they hide your services
• Navigation on tablets: the screen size designs forget

What should stay visible on phones?

The items most phone visitors need without opening the menu. Nielsen Norman Group found hidden navigation is used less, so keep the essentials out of the hidden menu.

• Logo, linking home.
• A labelled 'Menu' button.
• The main action: call, book, quote or WhatsApp.
• Basket and search on e-commerce sites.

• Hamburger menu vs bottom navigation on mobile websites
• The header CTA button: one action that stands apart

How should the collapsed menu behave?

It should open on a tap, show items in the same order as desktop, let visitors expand sub-menus clearly and close with an obvious button or a tap outside. It should be operable by keyboard and announce its state to screen readers. Avoid animations that make it slow to open.

• Nested menus on mobile: sub-menus that open and close
• Keyboard accessibility: can your site work without a mouse?

What about content, not just the menu?

Responsive navigation includes in-page routes: buttons, contents lists and links. Make sure they do not disappear or move below long content on phones. Google's mobile-first indexing uses the mobile version of pages, so any link missing on mobile may be missed by search too.

• Mobile and desktop menus: keep the two in step

What does this look like in practice?

A pattern we see: a site switches to a hamburger icon below 1,200 pixels, so most laptop visitors never see the menu. Showing the full menu down to the width where it actually stops fitting puts services in view for a large share of visitors.

• See client work
• Website Design & Development for UK businesses

Responsive navigation checklist

• Collapse only when the menu stops fitting.
• Label the button 'Menu'.
• Keep the main action visible on phones.
• Same links and order on every size.
• Keyboard and screen reader support.
• Test from large desktop to small phone.

• Navigation at 200% zoom: menus for visitors who enlarge text
• Fitts's law: why bigger, closer links are easier to use

Next step

Slowly narrow your browser window and note the width at which your menu collapses.