• Success Criterion 3.2.3
  • Conformance level AA

Breadcrumbs Present on Some Pages but Missing on Others

3.2.3 — Consistent Navigation

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Breadcrumbs present on some pages, absent/reordered on siblings.

Example 

<!-- Restaurant page -->
<nav aria-label="Breadcrumb">Home > Restaurants > Thai Kitchen</nav>

<!-- Order tracking page: breadcrumb missing entirely -->
<h1>Track Your Order</h1>

Why it matters

A customer who relied on breadcrumbs to jump back to the restaurant list from the menu page has no way to do the same from order tracking, since the breadcrumb simply isn't there.

How to test

Check breadcrumb presence/order on sibling pages: present on some, absent or reordered on others, fails.

How to fix

Include the same breadcrumb component on every page in the flow, extending the trail rather than omitting it.

<!-- Order tracking page -->
<nav aria-label="Breadcrumb">Home > Restaurants > Thai Kitchen > Track Order</nav>

Outcome

A customer tracking an order can retrace their path back to the restaurant in one click, same as on any other page.

Who is affected

Users with cognitive disabilities who depend on breadcrumbs to understand where they are lose that orientation on pages that quietly drop it.

Learn more

Related scenarios