Breadcrumbs Demo

Dynamic breadcrumbs in TanStack Start

Learn how to implement breadcrumbs that automatically update after mutations using router.invalidate()

Try the Demo

How It Works

1. Define Crumbs in Loaders

Each route returns a crumb property from its loader function.

2. Use useMatches()

The breadcrumb component uses useMatches() to reactively get all matched routes.

3. Invalidate After Mutations

Call router.invalidate() to re-run loaders and update breadcrumbs.

Key Code

// In your route loader
loader: async ({ params }) => {
  const data = await fetchData(params.id);
  return {
    crumb: data.name,  // Dynamic breadcrumb!
    data,
  };
}

// After a mutation
const handleSave = async () => {
  await updateData({ ... });
  await router.invalidate(); // Re-runs loaders!
};