Use global navigation for persistent movement across top-level product or service sections, breadcrumbs for hierarchy orientation, and bottom navigation for a small set of mobile primary destinations.
Use global navigation for persistent movement across top-level product or service sections, breadcrumbs for hierarchy orientation, and bottom navigation for a small set of mobile primary destinations.
Practice the judgment: Imagine this situation: Global nav lists every page and becomes impossible to scan. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Global navigation | Breadcrumbs | Bottom navigation |
|---|---|---|---|
| UI or UX | UI + UX - Persistent top-level navigation shell | UI + UX - Hierarchy orientation navigation | UI + UX - Persistent mobile primary navigation |
| UI guidance | Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior. | Render a labeled breadcrumb nav as an ordered hierarchy from the broadest relevant ancestor to the current page, with real ancestor links and a distinct current-page item. | Render three to five bottom destinations with stable touch targets, labels or accessible names, reinforcing icons, selected state, optional badges, and safe-area spacing. |
| UX guidance | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page. | Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts. |
| Good UI | A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls. | Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current. | Selected state uses shape, weight, and text color instead of relying on color alone. |
| Bad UI | A crowded row mixes every page, account action, language selector, and sign-out link. | Recent clicks are displayed as if they were the page hierarchy. | Six tiny icon-only items and a center plus button compete for space. |
| Good UX | Users switch from Projects to Reports, return to Projects, and find their project draft count preserved. | Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects. | Switching from Home to Saved and back preserves each section's scroll count and draft state. |
| Bad UX | Navigation opens external or utility destinations as if they were service sections. | The breadcrumb changes after every click, so the same page shows different trails for different users. | Tapping Search clears the Home feed position and opens a one-off command instead of a destination. |
| Best fit | Users revisit several top-level product or service areas. | Pages sit inside a clear parent-child hierarchy. | A compact mobile app has three to five high-frequency top-level destinations. |
| Avoid when | The flow has a single ordered transaction where navigation would distract or cause abandonment. | The flow is linear task progress rather than site hierarchy. | There are fewer than three or more than five primary destinations. |
| Required state | Default state with product or service identity and top-level links. | Interior page with full ancestor trail. | Default state with all primary destinations visible. |
| Accessibility burden | Use a labeled navigation landmark for primary navigation. | Place the trail in a labeled nav element. | Every icon must have a visible label or accessible name. |
| Common misuse | Listing every page or admin object in the global nav. | Showing browsing history instead of hierarchy. | Putting too many destinations into the bar. |