All Docs
FeaturesDepositClearUpdated March 11, 2026

Persistent Breadcrumb Trail in the Header Bar

Persistent Breadcrumb Trail in the Header Bar

Introduced in: v0.1.140

Overview

The dashboard header bar now displays a persistent breadcrumb trail that updates automatically as you navigate. Wherever you are in the application — whether you're viewing a tenancy detail page, reviewing a check-out report, or working inside a nested flow — the header always shows your exact position and provides a clear visual path back.

What it looks like

The breadcrumb sits on the left side of the top header bar and renders a condensed path of your current location:

Tenancies › 12 Oak Street
Check-Out Reports › Report #4821 › Room Inspection

Each segment is derived automatically from the current URL — no manual configuration is needed on individual pages.

How it works

The DashboardBreadcrumb component (which replaces the previous DashboardHeaderTitle) is mounted once in src/app/dashboard/layout.tsx and applies globally to all dashboard pages.

  • It uses usePathname to read the current route at render time
  • It passes the path segments to the existing PageBreadcrumb component to produce consistent crumb rendering
  • As the route changes, the breadcrumb trail updates automatically — no additional code is required on individual pages

Affected pages

All pages under /dashboard/ benefit from this change automatically, including:

  • /dashboard/tenancies/:id — e.g. Tenancies › 12 Oak Street
  • /dashboard/check-out/:reportId — e.g. Check-Out › Report #4821
  • Any other deeply nested routes within the dashboard layout

Migration notes for developers

If your page currently renders a manual back link or an inline PageBreadcrumb solely to provide header-level navigation context, that duplication can now be removed. The header breadcrumb handles this automatically.

Pages that use PageBreadcrumb for in-page structural navigation (e.g. a multi-step wizard with its own step trail) are unaffected — you can keep or remove those at your discretion.

Why this matters

Before this change, users navigating into detail pages had no persistent visual indication of where they were within the application hierarchy. The only navigation aid was either:

  • The browser back button
  • Ad-hoc back links manually added to individual pages (duplicated logic, inconsistent UX)

The persistent header breadcrumb eliminates this problem globally, provides a consistent navigation affordance, and reduces the surface area of duplicated back-link code across the codebase.