Four navigation forms
Navigation is not where you innovate. Four mature patterns cover almost every case — pick right and users won't have to learn it.
Navigation is not where you innovate. Four mature patterns cover almost every case. Pick the right one and users don't have to learn it; pick the wrong one and no amount of tweaking makes it feel right. There's really one question behind the choice: how many top-level modules do you have, and are they siblings or nested?
What you'll run into:
- The nav is overflowing, so you bury commonly used features a level deeper
- A left nav and a right tab bar at the same time, and users don't know which to look at
- You ask the AI for an admin panel and it defaults to a left sidebar — but your modules are really several separate systems
How to choose
| Form | Best for | How to decide |
|---|---|---|
| Left nav only | Docs, notes, a single system | Few modules (five to nine), all content belongs to one thing |
| Top nav only | Corporate sites, e-commerce, content sites | Content-first, few top-level entries, pages must stay open for content |
| Left top-level, top second-level | Admin panels with many modules | More than nine top-level items, each with several children |
| Top top-level, left second-level | Portal plus subsystems | The top bar switches between several independent systems, not categories of one system |
The third and fourth are the easiest to mix up. The test is one question: after switching in the top bar, does the left content change entirely, or is it just a filtered view? Entirely different set = the fourth form. Just filtered = the third.
These four forms are not stylistic preferences — the information structure forces them. Categories of one thing belong in one nav; entries of several independent systems belong on a top switcher. Debating styles before the structure is settled is wasted effort.
Four general rules
- Keep the top-level menu between five and nine items. That's roughly how many chunks short-term memory handles at once. Past nine, group them; under five, you probably don't need this layer.miller
- Don't bury nav deeper than two levels. Past level three, users rarely get there. Either promote the content or admit it's low-frequency and move it to settings. Platform sidebar guidelines likewise recommend no more than two levels of hierarchy.apple-hig
- The current location needs a clear visual cue. Highlight the selected item and pair it with breadcrumbs. The user should always be able to answer "where am I?" — and also see the shape of the nav: are they at the top level or inside a section? Breadcrumbs supply that second layer.
- Keep the nav structure consistent across all pages. One page suddenly swaps the nav and the user's mental map breaks.
Order matters too: put the most-used item in the most visible spot. The first item in a left nav and the leftmost item in a top nav get the most clicks in the entire navigation.
How it changes on mobile
| Desktop form | Mobile equivalent |
|---|---|
| Left nav only | Bottom tab bar; overflow goes into a "More" tab |
| Top nav only | Bottom tab bar, or a hamburger menu (acceptable for content sites) |
| Left top-level, top second-level | Bottom tabs for the top level; segmented control at the top for the second level |
| Top top-level, left second-level | Usually split into separate entries, or a system-switcher page |
The last row is a signal. If your desktop product uses the fourth form, the product is really several systems — and cramming them into a single phone app is often a bad idea.