Nested menus on mobile: sub-menus that open and close

Key takeaways

On phones, sub-menus should expand in place, with a clear toggle such as a plus or chevron that is separate from the parent link, and a link to the section overview inside. Keep to one level of nesting. Avoid menus that slide to a new panel without a clear way back, and keep the main action visible throughout.

• Expand sub-menus in place with a clear toggle.
• Separate the toggle from the parent link.
• Keep to one level of nesting on phones.
• Include an 'All services' overview link in each sub-menu.

Why are nested menus hard on phones?

On a small screen, each level of nesting pushes other items out of view and adds a tap. Visitors lose track of where they are, especially when panels slide sideways. Tapping a parent item can either open the sub-menu or navigate, and if visitors cannot predict which, they hesitate.

• How clear website navigation improves user experience
• Progressive disclosure: basics first, details on demand

What is the clearest pattern?

The clearest pattern for most business sites is an accordion: parent items listed vertically, each with a toggle that expands its children in place below it. Visitors stay in one list, can see the other sections and can collapse what they do not need.

• Parent label as a link to the section overview, or as a toggle.
• A separate plus, chevron or arrow button to expand.
• Children indented below the parent.
• The toggle changes to show open or closed.
• Only one level of children.

• Dropdown menus: hover, click, touch and keyboard

What about slide-in panels?

Panels that slide in for each level can work in large shops, but they hide the rest of the menu and need a clear 'Back' control at the top of each panel, labelled with the parent's name. For small sites with a few services, an accordion is simpler.

How do you make nested mobile menus accessible?

Toggles should be real buttons with names such as 'Show services', announce whether they are expanded and work with keyboard and screen readers. Targets need to be large enough; WCAG 2.2 sets a minimum of 24 by 24 CSS pixels. The W3C's menus tutorial shows the patterns.

• Accessible navigation: clearer for every visitor
• Tap target size: how big should buttons be on mobile?

When should you flatten instead?

If the menu has only a handful of sub-items, list them directly with no nesting. Nesting helps when it saves a long scroll, not when it hides three links behind a tap.

What does this look like in practice?

A pattern we see: on a phone, tapping 'Services' navigates to a services page instead of opening the sub-menu, so visitors never see the list. Adding a separate chevron toggle, and an 'All services' link inside the expanded list, lets them choose either.

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

Nested mobile menu checklist

• Accordion pattern for small sites.
• Separate toggle from parent link.
• One level of nesting.
• Overview link in each sub-menu.
• Toggles announce open and closed.
• Main action visible outside the menu.

• Responsive navigation: when the full menu should collapse
• Swipe gestures on websites: hidden navigation visitors miss

Next step

Open your mobile menu and tap each parent item. Does it open or navigate? Can you predict which?