Breadcrumb Navigation — No More Getting Lost in Deep Pages

Release: v0.1.85

---

The Problem

When you clicked a quick-action link in the Work Queue, you'd land deep inside a tenancy detail page with no obvious path back. The page header showed you the tenancy address, the sidebar was still there — but there was no breadcrumb, no "back to Tenancies" link, and no visual cue telling you how you got there. Your only options were the browser's back button or hunting through the sidebar.

For users managing multiple tenancies, doing bulk check-ins, or following up on deductions, this created unnecessary friction on every single task.

---

What's New in v0.1.85

The Tenancy Detail page (/dashboard/tenancies/[id]) now renders a breadcrumb trail directly above the tab bar:

Tenancies / 12 Oak Street, Manchester

Each segment is a live link. Click Tenancies and you're back at the list. No detours.

---

How It Works

The PageHeader component — which already had an icon slot — has been extended with an optional breadcrumb array prop:

<PageHeader
  title="12 Oak Street, Manchester"
  breadcrumb={[
    { label: "Tenancies", href: "/dashboard/tenancies" },
    { label: "12 Oak Street, Manchester" }
  ]}
/>

When the breadcrumb prop is provided, PageHeader renders it as a linked path above the page content. When it's omitted, the component behaves exactly as before — fully backwards compatible.

---

Coming Next

The breadcrumb pattern is being rolled out consistently across all deep-navigation pages:

Page	Path
Property Detail	/dashboard/properties/[id]
Check-In Report	/dashboard/check-in/[reportId]
Deductions	/dashboard/deductions/[tenancyId]

This ensures that no matter how you arrive at a detail page — via the Work Queue, a direct link, or a notification — you always have a clear, clickable path back.

---

Affected Files

• src/app/dashboard/tenancies/[id]/tenancy-detail-view.tsx
• src/components/page-header.tsx