1 files changed, 55 insertions, 0 deletions
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000..dbdeef0
--- /dev/null
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,55 @@
+import { useTabsStore } from '@/stores/useTabsStore'
+import { useFilesStore } from '@/stores/useFilesStore'
+
+export default function Breadcrumbs() {
+  const tabs = useTabsStore((s) => s.tabs)
+  const activeTabId = useTabsStore((s) => s.activeTabId)
+  const rootPath = useFilesStore((s) => s.rootPath)
+
+  if (!activeTabId || !rootPath) return null
+
+  const activeTab = tabs.find((t) => t.id === activeTabId)
+  if (!activeTab) return null
+
+  const fullPath = activeTab.path
+  let relativePath = fullPath
+
+  if (fullPath.startsWith(rootPath)) {
+    relativePath = fullPath.slice(rootPath.length).replace(/^[\\/]/, '')
+  }
+
+  const segments = relativePath.split(/[\\/]/)
+  const lastIdx = segments.length - 1
+
+  return (
+    <div className="flex items-center h-[26px] px-4 shrink-0 bg-editor-bg select-none gap-0 text-ui-xs overflow-hidden">
+      {segments.map((segment, i) => {
+        const isLast = i === lastIdx
+
+        if (isLast) {
+          return (
+            <span
+              key={i}
+              className="truncate text-text-primary font-medium"
+            >
+              {segment}
+            </span>
+          )
+        }
+
+        return (
+          <span key={i} className="flex items-center gap-0 min-w-0 shrink-0">
+            <button
+              className="truncate text-text-muted hover:text-text-secondary px-1 py-0.5 rounded transition-all duration-fast hover:bg-panel-hover cursor-pointer"
+            >
+              {segment}
+            </button>
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-text-muted opacity-30 mx-[2px]">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </span>
+        )
+      })}
+    </div>
+  )
+}