Use breadcrumbs for secondary hierarchy orientation, tabs for peer panels in one page context, and bottom navigation for persistent mobile access to top-level destinations.
Use breadcrumbs for secondary hierarchy orientation, tabs for peer panels in one page context, and bottom navigation for persistent mobile access to top-level destinations.
Practice the judgment: Imagine this situation: Showing browser history or recent clicks as breadcrumb items. 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 | Breadcrumbs | Tabs | Bottom navigation |
|---|---|---|---|
| UI or UX | UI + UX - Hierarchy orientation navigation | UI + UX - Section-switching component | UI + UX - Persistent mobile primary navigation |
| UI guidance | 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 a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. | 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 | Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page. | Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps. | Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts. |
| Good UI | Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. | Selected state uses shape, weight, and text color instead of relying on color alone. |
| Bad UI | Recent clicks are displayed as if they were the page hierarchy. | Tabs wrap unpredictably or look like unrelated buttons. | Six tiny icon-only items and a center plus button compete for space. |
| Good UX | Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects. | Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel. | Switching from Home to Saved and back preserves each section's scroll count and draft state. |
| Bad UX | The breadcrumb changes after every click, so the same page shows different trails for different users. | Using tabs as primary navigation to unrelated pages. | Tapping Search clears the Home feed position and opens a one-off command instead of a destination. |
| Best fit | Pages sit inside a clear parent-child hierarchy. | Users switch between sibling panels frequently. | A compact mobile app has three to five high-frequency top-level destinations. |
| Avoid when | The flow is linear task progress rather than site hierarchy. | The destinations are unrelated pages. | There are fewer than three or more than five primary destinations. |
| Required state | Interior page with full ancestor trail. | Default active tab and visible panel. | Default state with all primary destinations visible. |
| Accessibility burden | Place the trail in a labeled nav element. | Expose the active tab and associated panel. | Every icon must have a visible label or accessible name. |
| Common misuse | Showing browsing history instead of hierarchy. | Using tabs as a primary site navigation system. | Putting too many destinations into the bar. |