Dev Dictionary: Breadcrumb Navigation

A breadcrumb in UI is the trail of navigation titles showing where you’ve been.

The Concept

Breadcrumb navigation displays the full path of screens a user has traversed:

Home > Settings > Account > Details

Each label represents a step in the navigation history. Users can jump back to any point rather than tapping back one screen at a time.

Origin

The name comes from the fairy tale Hansel and Gretel — the children dropped breadcrumbs along the forest path so they could retrace their steps back home. In UI design, it’s the same idea: a trail marking each step you took.

On iOS

iOS implements breadcrumb navigation through the back button long-press menu. Long-press the back button in any UINavigationController stack to see the full list of previous screens.

import SwiftUI

NavigationStack {
    NavigationLink("Settings") {
        NavigationLink("Account") {
            NavigationLink("Details") {
                Text("You are here")
            }
            .navigationTitle("Details")
        }
        .navigationTitle("Account")
    }
    .navigationTitle("Settings")
    .navigationTitle("Home")
}

Long-pressing the back button on the “Details” screen reveals:

• Account
• Settings
• Home

This feature was introduced in iOS 14 and works automatically with UINavigationController and NavigationStack.

Web vs Mobile

Platform	Breadcrumb Style
Web	Visible text trail (Home > Settings > Account)
iOS	Hidden behind long-press back button
Android	Not natively supported (varies by app)

Key Takeaway

• Web breadcrumbs are always visible as a horizontal trail
• iOS breadcrumbs are discoverable through the back button long-press gesture
• Both serve the same purpose: letting users jump to any previous point in their navigation path