interaction design
Navigation patterns
What are the common navigation patterns?
Navigation patterns are the established ways of structuring how people move around a product - top tabs, a bottom bar, a hamburger drawer, a sidebar, breadcrumbs. Each is a familiar convention with different trade-offs in visibility, reach and capacity, and choosing well means matching the pattern to how many destinations you have, how important they are, and the device people use.
Also known as: navigation patterns, nav patterns, menu patterns
Prefer to watch?
Watch the recap 1:08
The demo
Navigation patterns aren't interchangeable - each trades visibility against capacity. A bottom bar keeps a few top destinations one thumb-tap away and always visible (great on mobile, but limited to ~5 items); a hamburger menu hides everything behind one icon, saving space but cutting discoverability and engagement; top tabs suit a handful of equal sections; a sidebar holds deep, complex hierarchies on larger screens; breadcrumbs show where you are in a deep structure. The rule: keep your most important, most-used destinations visible and reachable, and only hide secondary things. Don't bury primary navigation behind a hamburger just to look clean.
Switching the same app between patterns, you can feel the trade-offs: the bottom bar puts the key sections right under your thumb, while the hamburger tidies the screen but hides them a tap and a decision away - so people use them less. There's no single best pattern, only the right fit for how many destinations you have and how important they are. Keep the important ones visible; hide only the rest.
Each pattern has a profile. Bottom navigation: 3-5 top destinations, always visible, thumb-reachable - ideal for mobile primary nav. Top tabs: a small set of peer sections, visible but competing for horizontal space. Hamburger/drawer: unlimited items hidden behind one icon - space-saving but lower discoverability and engagement, best for secondary or occasional destinations. Sidebar/rail: deep, multi-level hierarchies on desktop. Breadcrumbs: orientation within a deep structure. Mega menus: many categories on content-heavy sites.
The central trade-off is visibility versus capacity. Visible patterns (tabs, bottom bars) constantly remind people what's available and get used more, but hold few items. Hidden patterns (hamburger, "more" menus) scale to many items but make them harder to find and less likely to be used - the well-documented cost of the hamburger menu for primary navigation. Reach matters too: on phones, bottom-anchored controls sit in the thumb zone.
Choose by matching pattern to content and context: surface your most important and most-used destinations in a visible, reachable pattern, and relegate only secondary ones to hidden menus. Consider the number of destinations, their relative importance, the depth of the hierarchy, and the device. Keep navigation consistent and predictable (Jakob's Law and schemas), label links with strong information scent, and don't sacrifice findability of primary nav for visual minimalism.