UX Patterns Guide
Back to compare picker

Breadcrumbs vs Tabs vs Bottom navigation

Prefer breadcrumbs when users may land deep in a hierarchical site and need to see or navigate to ancestor pages.

Breadcrumbs live exampleTabs live exampleBottom navigation live example

Decision dimensions

Dimension BreadcrumbsTabsBottom navigation
UI or UX UI + UX - Hierarchy orientation navigationUI + UX - Section-switching componentUI + 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.Help users switch between sibling sections in the same page context without changing routes or losing local work.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.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 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.Users switch between sibling sections without leaving page context or losing panel-local notes.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 app has a flat structure with no meaningful parent levels.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.

Breadcrumbs

UI or UX
UI + UX - Hierarchy orientation 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.
UX guidance
Orient users who arrive deep in a site by exposing the canonical parent-child relationship for the current page.
Good UI
Home, Projects, Migration, and Runbook appear in hierarchy order with ancestor links and Runbook marked current.
Bad UI
Recent clicks are displayed as if they were the page hierarchy.
Good UX
Opening a saved deep link still shows the same parent path and lets users jump to Migration or Projects.
Bad UX
The breadcrumb changes after every click, so the same page shows different trails for different users.
Best fit
Pages sit inside a clear parent-child hierarchy.
Avoid when
The app has a flat structure with no meaningful parent levels.
Required state
Interior page with full ancestor trail.
Accessibility burden
Place the trail in a labeled nav element.
Common misuse
Showing browsing history instead of hierarchy.

Tabs

UI or UX
UI + UX - Section-switching component
UI guidance
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.
UX guidance
Help users switch between sibling sections in the same page context without changing routes or losing local work.
Good UI
Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab.
Bad UI
Tabs wrap unpredictably or look like unrelated buttons.
Good UX
Users switch between sibling sections without leaving page context or losing panel-local notes.
Bad UX
Using tabs as primary navigation to unrelated pages.
Best fit
Users switch between sibling panels frequently.
Avoid when
The destinations are unrelated pages.
Required state
Default active tab and visible panel.
Accessibility burden
Expose the active tab and associated panel.
Common misuse
Using tabs as a primary site navigation system.

Bottom navigation

UI or UX
UI + UX - Persistent mobile primary navigation
UI guidance
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
Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts.
Good UI
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
Six tiny icon-only items and a center plus button compete for space.
Good UX
Switching from Home to Saved and back preserves each section's scroll count and draft state.
Bad UX
Tapping Search clears the Home feed position and opens a one-off command instead of a destination.
Best fit
A compact mobile app has three to five high-frequency top-level destinations.
Avoid when
There are fewer than three or more than five primary destinations.
Required state
Default state with all primary destinations visible.
Accessibility burden
Every icon must have a visible label or accessible name.
Common misuse
Putting too many destinations into the bar.
Decision rules
  • Prefer breadcrumbs when users may land deep in a hierarchical site and need to see or navigate to ancestor pages.
  • Prefer tabs when the choices are sibling content panels under the same current page and selecting one should reveal a local panel, not move up the information architecture.
  • Prefer bottom navigation on compact mobile screens when three to five high-frequency top-level destinations of similar importance must remain persistently reachable.
  • Do not use breadcrumbs to show the user's click path; the trail must represent the canonical parent-child hierarchy for the current page.
  • Do not use tabs as breadcrumbs: tab labels are peers, while breadcrumb items form an ordered ancestor path from broad to specific.
  • Do not use bottom navigation for deep hierarchy ancestors; it should expose primary destinations, not every parent page of the current item.
  • Do not use bottom navigation for commands such as create, edit, delete, filter, or submit; put high-priority commands in a floating action button, toolbar, or local action area.
  • When the same app has more destinations or a wider window, adapt bottom navigation to a navigation rail or drawer instead of cramming labels into the bottom bar.
  • If users are in a linear task flow, use a progress indicator or step navigation for task progress and keep any breadcrumb tied to the start page's site hierarchy.
Inspect live examples
BreadcrumbsTabsBottom navigation
Failure modes
  • Showing browser history or recent clicks as breadcrumb items.
  • Making the current breadcrumb look like another ancestor without aria-current or equivalent current-page text.
  • Using breadcrumbs on a flat site where the current location is already clear from primary navigation.
  • Using tabs for navigation to unrelated routes or parent sections.
  • Using bottom navigation and breadcrumbs as competing primary navigation systems on the same narrow mobile screen.
  • Adding a center create button as if it were a destination.
  • Letting destination switches reset scroll, drafts, filters, or nested navigation state inside each section.
  • Letting breadcrumb labels diverge from the destination page titles enough that users cannot predict where links go.