Skip to content
SkillCodex
Menu

Concept cluster

Orient within a journey

Compare hierarchical location, navigation across result pages, and progress through a multi-step process.

Try the 3 concepts, compare what changes, then use the Pack that fits your need.

Try the components

Orient within a journey

Try it

Should this locate the page in a hierarchy, move across result pages, or show a process stage?

Breadcrumbs

Shared trial context

A person needs to understand where they are and what kind of movement is available without confusing site hierarchy, result pages, and process stages.

Breadcrumbs

Mission

Breadcrumbs

Focus the Settings ancestor, activate it, and verify the destination replaces the current Billing location.

Destination: Billing

The trail describes hierarchy, never browser history.

Live result

Billing is current; the three preceding items are links to its ancestors.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
Current Billing is exposed separately from the ancestor links.
Edge case
Long localized labels wrap or collapse without turning separators into controls or losing accessible names.

What this example shows

Breadcrumbs expose the current page’s ancestry; Pagination moves among quantity-split peer pages, while Stepper tracks meaningful process stages.

Use the Pack — Breadcrumbs

Which fits your need?

Breadcrumbs

Pages belong to a hierarchy several levels deep

Pagination

Search results or collections need stable shareable pages

Which component will you use here?
Read the full PackVerify the result
Difference and sources

Breadcrumbs expose the current page’s ancestry; Pagination moves among quantity-split peer pages, while Stepper tracks meaningful process stages.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Trail

    The ordered sequence that communicates the surrounding hierarchy.

    The three concepts

    ConceptBreadcrumbsAn ordered trail of links to ancestors of the current page that exposes its place in a site hierarchy.OpenConceptPaginationA set of navigation links that moves among peer pages of one content collection split by quantity.OpenConceptStepperA progress summary that distinguishes completed, current, and upcoming stages in a meaningful linear process.Open

    The three comparisons

    ComparisonBreadcrumbs vs PaginationComparisonBreadcrumbs vs StepperComparisonPagination vs Stepper

    Signals you are confusing them

    These descriptions fit every concept in the cluster, so none of them is enough to decide.

    • show where the person is and what comes before or after
    • the sequence may represent hierarchy pages of results or process stages

    Other concept clusters

    Concept clusterMotion & EffectsConcept clusterSmall contextual surfacesConcept clusterModal surfacesConcept clusterEdge-attached surfacesConcept clusterChoose from a listConcept clusterChoices and binary statesConcept clusterChange view or reveal contentConcept clusterInform the userConcept clusterWait and track progressConcept clusterTrigger or navigateConcept clusterEnter textConcept clusterStructure and explore data