Breadcrumbs

In review

Live · web

Trail: leading glyphs, current crumb marked & non-interactive

1. dizyx
2. nockerl-design
3. Design the Breadcrumbs component
4. BreadcrumbsDemo.tsx

Deep path: middle collapses into a keyboard-openable “…” menu

1. dizyx
3. demos
4. BreadcrumbsDemo.tsx

Truncation: width-capped, the current crumb ellipsizes

1. dizyx
2. nockerl-dashboard
3. Conform the entire web dashboard to the published design tokens

Mobile: phone-narrow container auto-collapses to first + “…” + current

1. dizyx
2. nockerl-design
3. site
4. src
5. components
6. demos
7. BreadcrumbsDemo.tsx

Last crumb navigated: none yet. The island is live. Tab the crumbs; open “…” with Enter/Space, arrow through it, Esc to close. The mobile fold keeps every ancestor reachable through the same menu.

Mobile: auto-collapse

Breadcrumbs are a desktop pattern; on a phone-narrow container the trail auto-collapses to first + “…” + current (see the Mobile stage above). Every hidden ancestor stays reachable through the same keyboard-operable overflow menu, and the current crumb keeps its ellipsis. The desktop render is untouched; if a mobile surface can use back-navigation or a tree instead, prefer that.

Code

TypeScriptKotlinSwift

// Web: React, consuming @dizyx/nockerl-tokens. Breadcrumbs are a web-leaning
// pattern (neither shipped app has one), so this is the intended API, not yet
// exported from @dizyx/nockerl-react (promotion tracked).

export function FilePathTrail() {
  return (
    <Breadcrumbs
      collapseAfter={2}
      onNavigate={(label) => router.push(label)}
      items={[
        { label: 'dizyx', href: '/w/dizyx', icon: 'root' },
        { label: 'nockerl-design', href: '/w/dizyx/nockerl-design', icon: 'folder' },
        { label: 'site', href: '#', icon: 'folder' },
        { label: 'src', href: '#', icon: 'folder' },
        { label: 'BreadcrumbsDemo.tsx', icon: 'file' }, // no href → current page
      ]}
    />
  );
}

// Android: Jetpack Compose. There is NO breadcrumb component: the app wayfinds
// with system/arrow back + an indented file tree (see FilesSheet.kt). The path's
// leaf is the filename; "up" is the back arrow. This is the platform-native
// equivalent of a trail, documented honestly, not a fabricated API.
import androidx.compose.material.icons.Icons
import com.nockerl.app.core.ui.NockerlIconButton

@Composable
private fun ViewerHeader(filePath: String, onBack: -> Unit) {
    val fileName = filePath.substringAfterLast('/')   // leaf of the path
    Row(verticalAlignment = Alignment.CenterVertically) {
        NockerlIconButton(
            icon = Icons.AutoMirrored.Filled.ArrowBack,   // "up" one level
            contentDescription = "Back to file tree",
            onClick = onBack,
        )
        Text(fileName, style = MaterialTheme.typography.titleMedium, maxLines = 1)
    }
}

// macOS: SwiftUI. There is NO breadcrumb component in Nockerl Voice: hierarchy
// is shown with `navigationTitle` + the system back button, and disclosure rows
// use `chevron.right` (SettingsView.swift). Documented honestly, with no invented API.
NavigationStack {
    FileTreeView(node: project.root)
        .navigationTitle(project.name)          // the current level's title
        .navigationDestination(for: FileNode.self) { node in
            FileViewer(node: node)
                .navigationTitle(node.name)     // back button auto-shows the parent
        }
}

Parameters

TypeScriptKotlinSwift

Prop	Type	Default	Description
items *	Crumb[]	n/a	Ordered path, root → current. Each Crumb is { label, href?, icon? }. The last item is the current page: omit its href and it renders non-interactive with aria-current="page".
collapseAfter	number	n/a	When set and the trail is deeper than collapseAfter + 2, keeps the first crumb + this many trailing crumbs and folds the middle into a keyboard-openable … menu.
capped	boolean	false	Caps the trail width so the current crumb ellipsizes instead of overflowing the chrome bar.
onNavigate	(label: string) => void	n/a	Fired when an ancestor crumb (or an item in the overflow menu) is activated. The current crumb never fires it.
icon	'root' | 'folder' | 'task' | 'file'	n/a	Per-Crumb leading glyph. Echoes the apps: root (workspace), folder (project), task, file.

No breadcrumb component ships on Android, so the table documents the path-aware back-nav that stands in for it (FilesSheet.kt). Flagged as drift below.

Parameter	Type	Default	Description
filePath *	String	n/a	Full path of the current node. substringAfterLast('/') yields the leaf shown in the header.
onBack *	() -> Unit	n/a	Pops one level (Viewer → Tree). The system / gesture back triggers the same path.
icon	ImageVector	Icons.AutoMirrored.Filled.ArrowBack	The "up" affordance: an auto-mirrored back arrow, not a horizontal trail.

No breadcrumb component ships in Nockerl Voice. NavigationStack supplies the title + system back that stand in for a trail. Flagged as drift below.

Style	Type	Default	Description
.navigationTitle	View modifier	n/a	Sets the current level’s title; pushing a destination auto-shows a back button labeled with the parent.
.navigationDestination	View modifier	n/a	Declares the child view for a value, driving the push/pop hierarchy in place of a horizontal trail.
chevron.right	SF Symbol	n/a	The disclosure glyph on a navigable row (SettingsView.swift), the closest the app gets to a crumb separator.

Cross-platform drift (tracked for reconciliation)

Breadcrumbs are a web-only pattern today. The shipped natives wayfind differently, which is correct for those surfaces:

• No native component. Android (FilesSheet) and Voice (SettingsView) use back navigation + indented trees, not a horizontal trail. The TypeScript API is the canonical one; the Kotlin/Swift columns document the real stand-in.
• Shared vocabulary, not a port. The web trail deliberately reuses house parts: the chrome surface + 1.5dp cyan signature line (the apps’ header treatment), the house chevron as the separator, and the root/folder/task/file leading glyphs. It reads as Nockerl without inventing anything mobile doesn’t have.