Navigation/DSBreadcrumb

DSBreadcrumb

navigation
since v2.0

Hierarchical path display with chevron separators and tappable ancestor links.

iOS 17+macOS 14+

Purpose

Navigation hierarchy in macOS apps, iPad sidebars, and web-style deep link flows.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

PropTypeDefaultDescription
itemsreq[DSBreadcrumbItem]—Path segments with label and optional action.

Examples

File navigator

Path to current folder.

swift
DSBreadcrumb(items: [
    DSBreadcrumbItem(label: "Projects", action: { navigate(.projects) }),
    DSBreadcrumbItem(label: "Design System", action: { navigate(.project(id)) }),
    DSBreadcrumbItem(label: "Components"),  // last item = current, not tappable
])

Related Components

NavigationBarSidebar