diff --git a/web/src/shell/use-breadcrumb.ts b/web/src/shell/use-breadcrumb.ts
index 042d3ed..653e756 100644
--- a/web/src/shell/use-breadcrumb.ts
+++ b/web/src/shell/use-breadcrumb.ts
@@ -1,12 +1,15 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useRef } from "react";
 
 import { BreadcrumbContext, type BreadcrumbItem } from "./breadcrumb-context";
 
 export function useBreadcrumb(trail: BreadcrumbItem[]): void {
   const { setTrail } = useContext(BreadcrumbContext);
-  const key = trail.map((i) => `${i.label} ${i.to ?? ""}`).join("");
+  const trailRef = useRef(trail);
   useEffect(() => {
-    setTrail(trail);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    trailRef.current = trail;
+  });
+  const key = JSON.stringify(trail.map((item) => [item.label, item.to ?? null]));
+  useEffect(() => {
+    setTrail(trailRef.current);
   }, [key, setTrail]);
 }