How It Works

1. Each route defines a crumb property in its loader
2. The BreadcrumbNav component uses useMatches() to get all matched routes
3. It filters routes that have loaderData.crumb using isMatch()
4. After a mutation, calling router.invalidate() re-runs loaders
5. The breadcrumbs automatically update because useMatches() is reactive

Try It Out

Navigate to an organization, then to an employee. Edit their name and watch the breadcrumb update instantly!