| 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. | Five labeled destinations stay fixed at the bottom with Home selected, Alerts showing a small badge, and no action button mixed into the bar. |
| 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 | Switching top-level sections clears filters or drafts without notice. | 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 app has a flat structure with no meaningful parent levels. | 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. |