Cleaner Navigation: Breadcrumbs Now Show Product Names
Cleaner Navigation: Breadcrumbs Now Show Product Names
Version: 1.0.1 Category: UI/UX · Navigation
Overview
Starting in v1.0.1, the dashboard breadcrumb trail replaces raw product ID segments with the actual human-readable product name. If you were navigating deep into a product's configuration and saw a cryptic string like Cm1abc456 in the breadcrumb, this update is for you.
The Problem
Every product in SaaS Factory is identified internally by an auto-generated ID (e.g., cm1abc456). These IDs appear in the URL, which is expected — but the BreadcrumbHeader component was previously rendering them verbatim as breadcrumb labels, title-casing the raw ID string:
Dashboard > Products > Cm1abc456 > Features
This made it impossible to confirm which product context you were in just by reading the breadcrumb — a basic navigational expectation.
The Fix
The BreadcrumbHeader component now reads from ProductContext (already maintained by the application for the active product) via the useProduct() hook. When the current route includes a product ID segment, the component substitutes the resolved product name:
Dashboard > Products > My Awesome App > Features
This works for all nested product routes:
/dashboard/products/:id/features→Dashboard > Products > {Product Name} > Features/dashboard/products/:id/settings→Dashboard > Products > {Product Name} > Settings/dashboard/products/:id/releases→Dashboard > Products > {Product Name} > Releases
Behaviour Details
Context-aware substitution
The fix is scoped to the product [id] segment only. All other URL segments (e.g., features, settings, dashboard) continue to be formatted from the path string as before — no changes to non-product routes.
Safe fallback
If ProductContext does not yet have the product name available (for example, during an initial page load before the product data has resolved), the breadcrumb falls back gracefully to the prior formatting. Breadcrumbs will never render as blank or broken.
No new dependencies
ProductContext and useProduct() were already available at the BreadcrumbHeader level. This change adds a lightweight context read — no new API calls, no new state, no new packages.
Summary
| Before | After | |
|---|---|---|
| Breadcrumb label for product routes | Raw ID (Cm1abc456) | Product name (My Awesome App) |
| Non-product route formatting | Unchanged | Unchanged |
| Fallback when name unavailable | N/A | Graceful fallback to segment formatting |
| Breaking changes | — | None |