Breadcrumb Navigation Replaces Back Links

Date: 2026-04-12 Type: Build Log

Context

The app had a pervasive "← Back to X" pattern above page headers for navigation. This eyebrow-style back link appeared on ~10 pages across blog posts, parts detail, control center sub-pages, docs, and mission detail/captures. The user wanted it gone in favor of breadcrumbs in the top bar, which provide the same hierarchical navigation without cluttering page content.

What Changed

Created src/components/breadcrumb-nav.tsx — a breadcrumb system with three exports:

• BreadcrumbProvider — React context that resets on route change, allowing pages to register dynamic titles
• BreadcrumbNav — renders breadcrumbs in the top bar using the existing shadcn Breadcrumb components (which were installed but unused). Maps static route segments to readable labels (e.g., control-center → "Control Center", blog → "Build Log"). For unknown segments, converts kebab-case slugs to Title Case and abbreviates long IDs.
• useBreadcrumbTitle(title) — hook for client pages with dynamic segments to set a readable breadcrumb label (e.g., post title, part name, mission date)

Updated src/app/layout.tsx — replaced the static "Tick Slayer 3000" text in the header with BreadcrumbNav, wrapped content in BreadcrumbProvider.

Removed back-link patterns from 10 pages:

• blog/[slug]/page.tsx — removed 3 back buttons (normal view, not-found, unpublished states)
• blog/edit/[[...id]]/page.tsx — removed back button and not-found back link
• parts/[id]/page.tsx — removed 2 back buttons (normal and not-found)
• control-center/diagnostics/page.tsx — removed back link
• control-center/tick-log/page.tsx — removed back link
• control-center/new-mission/page.tsx — removed back link
• control-center/missions/[id]/page.tsx — removed back link
• control-center/missions/[id]/captures/page.tsx — removed back link
• docs/[slug]/page.tsx — removed 2 ← back links (article and progress log views)
• docs/progress/page.tsx — removed ← back link

Added useBreadcrumbTitle() to dynamic pages:

• Blog post → shows post title
• Blog editor → shows post title or "New Post"
• Part detail → shows part name
• Mission detail → shows formatted date (e.g., "Apr 13, 3:00 PM")
• Captures → shows parent mission date

Files Modified

• src/components/breadcrumb-nav.tsx - New file: breadcrumb context, nav component, title hook
• src/app/layout.tsx - Swapped static text for BreadcrumbNav, added BreadcrumbProvider
• src/app/blog/[slug]/page.tsx - Removed 3 back buttons, added useBreadcrumbTitle
• src/app/blog/edit/[[...id]]/page.tsx - Removed back buttons, added useBreadcrumbTitle
• src/app/parts/[id]/page.tsx - Removed back buttons, added useBreadcrumbTitle
• src/app/control-center/diagnostics/page.tsx - Removed back link
• src/app/control-center/tick-log/page.tsx - Removed back link
• src/app/control-center/new-mission/page.tsx - Removed back link
• src/app/control-center/missions/[id]/page.tsx - Removed back link, added useBreadcrumbTitle
• src/app/control-center/missions/[id]/captures/page.tsx - Removed back link, added useBreadcrumbTitle
• src/app/docs/[slug]/page.tsx - Removed 2 back links (server component, no title hook)
• src/app/docs/progress/page.tsx - Removed back link

Key Takeaways

• The shadcn breadcrumb component was already installed but unused — no new dependencies needed
• docs/[slug] is a server component so it can't use useBreadcrumbTitle; the breadcrumb falls back to converting kebab-case slugs to Title Case, which works well enough for human-readable doc slugs
• The prev/next navigation at the bottom of doc pages was preserved — only the top back links were removed
• For pages like captures that have a dynamic segment in the middle of the path (/missions/[id]/captures), the breadcrumb title applies to the dynamic segment