From a630513967e0f8b5fd6548710aa88ff3c16435c5 Mon Sep 17 00:00:00 2001
From: snowopsdev <6538071+snowopsdev@users.noreply.github.com>
Date: Sat, 28 Feb 2026 12:09:16 -0500
Subject: [PATCH] feat: add TerminalBreadcrumbs component

---
 app/playground/page.tsx             | 28 ++++++++++-
 components/terminal-breadcrumbs.tsx | 75 +++++++++++++++++++++++++++++
 components/terminal.tsx             |  1 +
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 components/terminal-breadcrumbs.tsx

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
index f6a7bde..9b12bc2 100644
--- a/app/playground/page.tsx
+++ b/app/playground/page.tsx
@@ -1,5 +1,5 @@
 import { TerminalApp } from '@/components/terminal-app'
-import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher } from '@/components/terminal'
+import { Terminal, TerminalCommand, TerminalDiff, TerminalOutput, TerminalSpinner, TerminalBadge, ThemeSwitcher, TerminalBreadcrumbs } from '@/components/terminal'
 import { TerminalProgress } from '@/components/terminal-progress'
 import { LogDemo } from './log-demo'
 import { PromptDemo } from './prompt-demo'
@@ -161,6 +161,32 @@ export default function PlaygroundPage() {
         </Terminal>
       </section>
 
+      <section className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
+          TerminalBreadcrumbs
+        </h2>
+        <Terminal title="breadcrumbs-demo.sh">
+          <TerminalCommand>pwd</TerminalCommand>
+          <TerminalOutput>
+            <TerminalBreadcrumbs items={[
+              { label: '~', href: '#' },
+              { label: 'dev', href: '#' },
+              { label: 'terminal-ui', href: '#' },
+              { label: 'src', active: true }
+            ]} />
+          </TerminalOutput>
+          <div className="mt-4" />
+          <TerminalCommand>cat config.json</TerminalCommand>
+          <TerminalOutput>
+            <TerminalBreadcrumbs separator="›" items={[
+              { label: 'root' },
+              { label: 'settings' },
+              { label: 'theme' }
+            ]} />
+          </TerminalOutput>
+        </Terminal>
+      </section>
+
       <section className="flex flex-col gap-2">
         <h2 className="text-lg font-semibold font-mono text-[var(--term-fg)]">
           Typing Animation
diff --git a/components/terminal-breadcrumbs.tsx b/components/terminal-breadcrumbs.tsx
new file mode 100644
index 0000000..959a704
--- /dev/null
+++ b/components/terminal-breadcrumbs.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { Fragment } from 'react'
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+  active?: boolean
+}
+
+export interface TerminalBreadcrumbsProps {
+  /** Array of breadcrumb segments */
+  items: BreadcrumbItem[]
+  /** Separator string between items (default: '/') */
+  separator?: string
+  /** Additional classes applied to the root element */
+  className?: string
+}
+
+/**
+ * Displays a directory path or navigation trail in a terminal style.
+ * 
+ * @param items - Array of breadcrumb segments
+ * @param separator - Separator string between items (default: '/')
+ * @param className - Additional classes applied to the root element
+ * 
+ * @example
+ * ```tsx
+ * <TerminalBreadcrumbs items={[
+ *   { label: '~' },
+ *   { label: 'projects' },
+ *   { label: 'terminal-ui', active: true }
+ * ]} />
+ * ```
+ */
+export function TerminalBreadcrumbs({
+  items,
+  separator = '/',
+  className = '',
+}: TerminalBreadcrumbsProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={`flex flex-wrap items-center gap-1.5 font-mono text-sm ${className}`.trim()}>
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1
+        const active = item.active ?? isLast
+
+        const content = (
+          <span className={`transition-colors ${active ? 'text-[var(--term-blue)] font-bold' : 'text-[var(--term-fg)] hover:text-[var(--term-cyan)]'}`}>
+            {item.label}
+          </span>
+        )
+
+        return (
+          <Fragment key={index}>
+            {item.href && !active ? (
+              <a href={item.href} className="outline-none focus-visible:ring-1 focus-visible:ring-[var(--term-blue)] rounded">
+                {content}
+              </a>
+            ) : (
+              <span className="outline-none">
+                {content}
+              </span>
+            )}
+            
+            {!isLast && (
+              <span className="text-[var(--term-fg-dim)] select-none" aria-hidden>
+                {separator}
+              </span>
+            )}
+          </Fragment>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/components/terminal.tsx b/components/terminal.tsx
index 56c9e1f..628e8a0 100644
--- a/components/terminal.tsx
+++ b/components/terminal.tsx
@@ -264,3 +264,4 @@ export { TerminalAutocomplete, useAutocomplete, COMMON_COMMANDS, COMMON_FLAGS, f
 export { TerminalGhosttyTheme, GhosttyThemePicker } from './terminal-ghostty'
 export { ThemeSwitcher } from './theme-switcher'
 export { TerminalBadge } from './terminal-badge'
+export { TerminalBreadcrumbs } from './terminal-breadcrumbs'