diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 08ded7c6b..0465a8f54 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -25,7 +25,7 @@ import ActionButton from "../react/ActionButton";
 import { Badge } from "../react/Badge";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { useActiveNoteContext, useChildNotes, useNote, useNoteColorClass, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useStaticTooltip, useTriliumOptionBool } from "../react/hooks";
+import { useActiveNoteContext, useChildNotes, useNote, useNoteColorClass, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTitle, useStaticTooltip, useTriliumOptionBool } from "../react/hooks";
 import Icon from "../react/Icon";
 import { NewNoteLink } from "../react/NoteLink";
 import { ParentComponent } from "../react/react_utils";
@@ -134,9 +134,9 @@ function BreadcrumbHoistedNoteRoot({ noteId }: { noteId: string }) {
 
 function BreadcrumbLastItem({ notePath, parentComponent }: { notePath: string, parentComponent: Component | null }) {
     const linkRef = useRef<HTMLAnchorElement>(null);
-    const noteId = notePath.split("/").at(-1);
+    const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
     const [ note ] = useState(() => froca.getNoteFromCache(noteId!));
-    const title = useNoteProperty(note, "title");
+    const title = useNoteTitle(noteId, parentNoteId);
     const colorClass = useNoteColorClass(note);
     const [ archived ] = useNoteLabelBoolean(note, "archived");
     useStaticTooltip(linkRef, {
diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
index 7a86be7ef..b1b3d732b 100644
--- a/apps/client/src/widgets/react/NoteLink.tsx
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -1,9 +1,10 @@
 import clsx from "clsx";
 import { HTMLAttributes } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
 
 import link, { calculateHash, ViewScope } from "../../services/link";
-import { useImperativeSearchHighlighlighting, useNote, useNoteColorClass, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent } from "./hooks";
+import tree from "../../services/tree";
+import { useImperativeSearchHighlighlighting, useNote, useNoteColorClass, useNoteIcon, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTitle, useTriliumEvent } from "./hooks";
 import Icon from "./Icon";
 
 interface NoteLinkOpts {
@@ -97,9 +98,11 @@ interface NewNoteLinkProps extends Pick<HTMLAttributes<HTMLAnchorElement>, "onCo
 }
 
 export function NewNoteLink({ notePath, viewScope, noContextMenu, showNoteIcon, noPreview, ...linkProps }: NewNoteLinkProps) {
-    const noteId = notePath.split("/").at(-1);
+
+    const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
     const note = useNote(noteId);
-    const title = useNoteProperty(note, "title");
+
+    const title = useNoteTitle(noteId, parentNoteId);
     const icon = useNoteIcon(showNoteIcon ? note : null);
     const colorClass = useNoteColorClass(note);
     const [ archived ] = useNoteLabelBoolean(note, "archived");
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index df951df4b..bc5e7a8e7 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1086,6 +1086,22 @@ export function useNote(noteId: string | null | undefined, silentNotFoundError =
     return undefined;
 }
 
+export function useNoteTitle(noteId: string | undefined, parentNoteId: string | undefined) {
+    const [ title, setTitle ] = useState<string>();
+    const requestIdRef = useRef(0);
+
+    useEffect(() => {
+        const requestId = ++requestIdRef.current;
+        if (!noteId) return;
+        tree.getNoteTitle(noteId, parentNoteId).then(title => {
+            if (requestId !== requestIdRef.current) return;
+            setTitle(title);
+        });
+    }, [ noteId, parentNoteId ]);
+
+    return title;
+}
+
 export function useNoteIcon(note: FNote | null | undefined) {
     const [ icon, setIcon ] = useState(note?.getIcon());
     const iconClass = useNoteLabel(note, "iconClass");