Navigation patterns

Navigation is how people move through the structure you designed. It must answer three questions on every screen: Where am I? What can I do here? Where can I go next?

Common patterns

• Top navigation bar: a row of links across the top. Works well on desktop for five to seven main sections.
• Sidebar: a vertical list, common in apps and dashboards with many sections.
• Bottom tab bar: three to five main destinations on mobile, always visible and easy to reach with a thumb.
• Hamburger or drawer menu: hides navigation behind an icon. Saves space but makes options less visible, so use it for secondary items or when there are too many items for tabs.
• Breadcrumbs: show the path to the current page in a hierarchy, useful on deep sites.
• Local navigation: links within a section, such as tabs on a settings page.

Showing location

Highlight the current section, use clear page titles, and keep navigation in the same place on every screen. On mobile, the back behaviour must be predictable.

Navigation is often the first thing people use and the thing they rely on when lost. Visible, consistent navigation helps people discover what a product offers. Hidden or inconsistent navigation makes features feel missing and increases reliance on search and support.

A fitness app hides all sections behind a hamburger menu. Analytics show that few people ever visit "Plans", even though it is the main paid feature.

The team moves the four most important destinations (Today, Workouts, Plans, Profile) into a bottom tab bar, keeping settings and help in the profile area. Visits to Plans rise sharply because people can now see it exists. The highlighted active tab also helps people understand where they are.