UIDex

What is the difference?

Breadcrumbs vs Steps / Stepper

The difference is what each one measures. Breadcrumbs measure depth inside a fixed tree that exists regardless of you: the page sits where it sits whether you visit it or not. Steps measure your own progress through a task that ends.

Ask yourself one question

If you landed on this page straight from a search result, would the indicator still be correct?

RTLالسهم منعكس تلقائياً، جرّب تبديل اللغة من الأعلى

Breadcrumbs

مسار التنقّل
aria-current="page"

Use it when

A content site with nested categories: a shop, documentation, an archive. The trail is fixed per page and never varies by visitor.

Full entry

الخطوة 2 من 4 · الشحن

RTLالخطوة الأولى تبدأ من اليمين، وعلامة الصح لا تنعكس

Steps / Stepper

مؤشّر الخطوات
aria-current="step"

Use it when

An action with an end: a checkout, onboarding a new account, a long split form. The indicator moves as the user moves.

Full entry

The classic mistake

Filling breadcrumbs with the pages the visitor happened to view. That is a history trail, not a breadcrumb: the same page then shows two different trails to two visitors, and it breaks the BreadcrumbList data in search results.

Other comparisons