Navigation

Choosing between Breadcrumb, Tabs, List, and other patterns to move users through a product.

Decision guide

Navigation components differ in one fundamental way: whether the user moves to a new location or switches views within the same location. Getting this distinction wrong creates back-button confusion and broken mental models.

SituationComponentWhy
Show where you are in a hierarchyBreadcrumbSurfaces the path from root to current page. Each crumb is a link. Use when depth is 3 or more levels.
Switch between views on the same pageTabsChanges visible content without a page load. URL may or may not change. Back button should not change tabs.
Navigate between pages in a sectionSidebar nav / ListFull page navigation. Use a List with active-state styling for secondary nav within a section.
Top-level global navigationNav bar / HeaderPersistent across the whole product. Not a Source component, but uses Link and Button components internally.
Previous / next linear sequencePagination / Step navFor moving through paginated data or wizard steps. Each step is a real navigation event.

Breadcrumb

Breadcrumbs answer "where am I?" They are most useful in deep hierarchies where the user may have arrived from a search or external link with no memory of how they got there.

RuleGuidance
Minimum depthOnly show breadcrumb when there are at least 3 levels (Home / Section / Page). Two levels don't need it.
Current pageThe last crumb is the current page. It should not be a link. Use aria-current="page" on it.
TruncationOn mobile, collapse middle crumbs into an ellipsis. Always keep root and current page visible.
SeparatorUse a chevron (›) or slash (/), not ">" or ">". Mark it aria-hidden="true".
PlacementAbove the page heading, below the main nav. Don't put it in the sidebar.

Tabs vs navigation

Tabs and navigation links look similar but behave very differently. Confusing them breaks the browser back button and misleads users about what is a page versus what is a view.

TabsNavigation links
Content changes without a page loadBrowser navigates to a new URL
Back button ignores tab switchesBack button returns to the previous page
Uses role="tablist" + role="tab"Uses <nav> + <a> elements
Good for: Overview / Code / Accessibility sectionsGood for: Settings / Billing / Team sections

List as navigation

A List component can function as sidebar navigation when wrapped in a <nav> and given active-state styling. The pattern works for secondary navigation within a section where the items are links to full pages.

<nav aria-label="Settings">
  <List>
    <ListItem href="/settings/profile" active>Profile</ListItem>
    <ListItem href="/settings/billing">Billing</ListItem>
    <ListItem href="/settings/team">Team</ListItem>
  </List>
</nav>

Mark the active item with aria-current="page". Do not simulate navigation with Tabs — these are separate pages and the back button should work.

Depth and hierarchy

Navigation scales with hierarchy depth. Use this as a rough guide:

DepthRecommended pattern
1 levelTop nav only. No secondary navigation needed.
2 levelsTop nav + sidebar or tab strip on section pages.
3+ levelsAdd breadcrumb. Consider whether depth is necessary — three levels of nav often signals a structural problem.

Do and don't

Do

Show breadcrumb only on deep hierarchies (3 levels or more).

Place breadcrumb above the page heading and below global nav.

Use tabs only for view switching inside the same page context.

Mark active navigation destination with aria-current="page".

Don't

Show breadcrumb on flat or two-level information architecture.

Use ">" as breadcrumb separator characters.

Mix tabs and page links for the same navigation set.

Use tabs for navigation between distinct pages.