Vertical vs horizontal navigation: side menu or top menu?

Key takeaways

A horizontal top menu suits most business websites: it is familiar, uses little space and fits five to seven items. A vertical side menu suits sites with many sections or long section lists, such as help centres, documentation and large catalogues. Many sites combine them: a top menu for the whole site and a side menu within a section.

• Vertical side menu: scales to long lists and deeper sections.
• Horizontal top menu: familiar, compact, best for five to seven items.
• Vertical suits help centres, documentation and section menus.
• Horizontal suits most small business sites as the main menu.

When does a horizontal top menu work best?

A horizontal menu works best when the site has a handful of main sections with short labels, which describes most small business sites. It is the convention visitors expect, keeps the content area full width and leaves room for a logo and a header action. It struggles when labels are long or there are more than about seven items.

• How clear website navigation improves user experience
• How many menu items should a website have?

When does a vertical side menu work best?

A vertical menu works best when there are many items or long labels, because a column can grow downwards without wrapping. Nielsen Norman Group notes vertical navigation scales better and is easier to scan for long lists. It suits help centres, documentation, account areas and section menus within larger sites.

• Section navigation: help visitors move within a topic
• Resource hubs: navigation for guides, downloads and help

Can you combine both?

Yes, and many well-structured sites do. The top menu carries the main sections across the whole site; a side menu inside each large section lists its pages, with the current one highlighted. Visitors get the overview and the local detail without either menu getting long.

• Primary vs secondary navigation: what goes where
• 'You are here': show visitors where they are

What happens on phones?

On phones, a side menu has no room, so both usually collapse behind a menu button or turn into a compact list at the top of the section. Make sure the section menu is still reachable and labelled, rather than disappearing on small screens.

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

What are the trade-offs?

Side menus take horizontal space from content, which matters on laptops. Top menus limit the number of items. Hiding a top menu behind a hamburger icon on desktop to save space is usually the worst of both, because visitors use hidden menus less.

• Hamburger menus on desktop: why they hide your services

What does this look like in practice?

A pattern we see: a firm with 40 guides lists them all in a top menu dropdown that scrolls off the screen. Moving the guides to a hub page with a side menu grouped by topic, and keeping the top menu to five items, makes both easier to use.

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

Layout checklist

• Top menu for five to seven main sections.
• Side menu for long lists within a section.
• Highlight the current page in both.
• Keep section menus reachable on phones.
• Do not hide the top menu on desktop.

• Dropdown menus: hover, click, touch and keyboard
• Flat vs deep site structure: which is easier to navigate?

Next step

Count your top-level items and longest section. That tells you whether you need a side menu.