diff --git a/src/components/documents/folder-breadcrumb.tsx b/src/components/documents/folder-breadcrumb.tsx
new file mode 100644
index 00000000..dd7acd3b
--- /dev/null
+++ b/src/components/documents/folder-breadcrumb.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { ChevronRight, Home } from 'lucide-react';
+
+import { useDocumentFolders, type FolderNode } from '@/hooks/use-document-folders';
+
+interface FolderBreadcrumbProps {
+  selectedFolderId: string | null | undefined;
+  onSelect: (folderId: string | null | undefined) => void;
+}
+
+function findPath(tree: FolderNode[], id: string): FolderNode[] | null {
+  for (const node of tree) {
+    if (node.id === id) return [node];
+    const inChild = findPath(node.children, id);
+    if (inChild) return [node, ...inChild];
+  }
+  return null;
+}
+
+export function FolderBreadcrumb({ selectedFolderId, onSelect }: FolderBreadcrumbProps) {
+  const { data: tree = [] } = useDocumentFolders();
+
+  let label: string;
+  let path: FolderNode[] = [];
+  if (selectedFolderId === undefined) {
+    label = 'All documents';
+  } else if (selectedFolderId === null) {
+    label = 'Root';
+  } else {
+    path = findPath(tree, selectedFolderId) ?? [];
+    label = path.at(-1)?.name ?? 'Folder';
+  }
+
+  return (
+    <nav
+      aria-label="Folder breadcrumb"
+      className="flex items-center gap-1 text-sm text-muted-foreground"
+    >
+      <button
+        type="button"
+        onClick={() => onSelect(undefined)}
+        className="flex items-center gap-1 hover:text-foreground"
+      >
+        <Home className="h-3.5 w-3.5" />
+        <span>All</span>
+      </button>
+      {path.length === 0 && selectedFolderId === null ? (
+        <>
+          <ChevronRight className="h-3.5 w-3.5" />
+          <span className="text-foreground">Root</span>
+        </>
+      ) : null}
+      {path.map((node, i) => (
+        <span key={node.id} className="flex items-center gap-1">
+          <ChevronRight className="h-3.5 w-3.5" />
+          {i === path.length - 1 ? (
+            <span className="text-foreground">{node.name}</span>
+          ) : (
+            <button
+              type="button"
+              onClick={() => onSelect(node.id)}
+              className="hover:text-foreground"
+            >
+              {node.name}
+            </button>
+          )}
+        </span>
+      ))}
+      <span className="sr-only">Current location: {label}</span>
+    </nav>
+  );
+}