Grouping menu items so visitors see the pattern

Key takeaways

Grouping menu items helps visitors see the pattern and skip whole groups that do not apply to them. Group by what buyers need, not by your departments. Give every group a plain heading, keep groups to a handful of items each, and use space as well as lines to separate them. Check the groups with a card sort.

• Group by buyer need, not internal department.
• Give every group a short, plain heading.
• Keep groups small: a handful of items each.
• Use white space to separate groups visibly.

Why does grouping help navigation?

Groups turn a long list into a few short ones. A visitor looking for a residential service can skip the commercial group entirely. Nielsen Norman Group's work on cognitive load notes that chunking information into meaningful groups makes it easier to process. The fewer items visitors must read, the faster they find theirs.

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

How should you decide the groups?

Decide groups from customers' view. A card sort, in which customers sort your pages into piles and name them, shows which groupings make sense to them. Common patterns are by service type, by customer type, by problem and by stage, such as 'Plan', 'Build', 'Maintain'.

• Card sorting: let customers organise your website
• Audience-based navigation: should menus split by customer?

How should groups be labelled and laid out?

Every group needs a heading that says what the items have in common. Headings should not be links that look like items, or visitors will confuse the two. Separate groups with space and a subtle rule, and keep each group's items in a consistent order.

• Short, specific group headings.
• Headings styled differently from links.
• Space between groups.
• Three to seven items per group as a rule of thumb.
• Consistent order within each group.

• Mega menus: when a small business website needs one

What are the common grouping mistakes?

The common mistakes are groups that mirror the org chart, a 'Miscellaneous' or 'More' group that becomes a dumping ground, items that could fit two groups, and single-item groups. Each forces visitors to think about your structure instead of their need.

Can an item appear in two groups?

Occasionally, if customers genuinely look for it in both places. Link both to the same page, with the same label. Do not do it routinely; duplicate links make menus longer and can suggest two different pages.

What does this look like in practice?

A pattern we see: a 'Services' dropdown holds 16 items in one column. Splitting it into 'For homes', 'For businesses' and 'Maintenance', each with four to six items and a clear heading, lets visitors skip two-thirds of the list.

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

Grouping checklist

• Run a card sort with customers.
• Group by buyer need.
• Label every group plainly.
• Keep groups to a handful of items.
• Remove 'Miscellaneous' and 'More' groups.
• Separate groups with space.

• The services menu: how to list what you sell
• Menu order: which item goes first, and why it matters

Next step

Look at your longest dropdown and sketch two or three groups a customer would recognise.