Introduce DevBreadcrumbs component for navigation and replace headers in /dev pages with breadcrumb navigation. Adjust spacing for consistent layout.

frontend/src/components/dev/ComponentShowcase.tsx

@@ -67,6 +67,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Example, ExampleGrid, ExampleSection } from './Example';
+import { DevBreadcrumbs } from './DevBreadcrumbs';
 
 /**
  * Component showcase
@@ -76,8 +77,11 @@ export function ComponentShowcase() {
 
   return (
     <div className="bg-background">
+      {/* Breadcrumbs */}
+      <DevBreadcrumbs items={[{ label: 'Components' }]} />
+
       {/* Content */}
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-12">
         <div className="space-y-12">
           {/* Colors */}
           <ExampleSection

frontend/src/components/dev/DevBreadcrumbs.tsx

@@ -0,0 +1,64 @@
+/* istanbul ignore file */
+
+/**
+ * DevBreadcrumbs Component
+ * Breadcrumb navigation for dev pages
+ * This file is excluded from coverage as it's a development tool
+ */
+
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight, Home } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Breadcrumb {
+  label: string;
+  href?: string;
+}
+
+interface DevBreadcrumbsProps {
+  items: Breadcrumb[];
+  className?: string;
+}
+
+export function DevBreadcrumbs({ items, className }: DevBreadcrumbsProps) {
+  return (
+    <nav
+      className={cn('bg-muted/30 border-b', className)}
+      aria-label="Breadcrumb"
+    >
+      <div className="container mx-auto px-4 py-3">
+        <ol className="flex items-center gap-2 text-sm">
+          {/* Home link */}
+          <li>
+            <Link
+              href="/dev"
+              className="inline-flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Home className="h-4 w-4" />
+              <span>Hub</span>
+            </Link>
+          </li>
+
+          {/* Breadcrumb items */}
+          {items.map((item, index) => (
+            <li key={index} className="flex items-center gap-2">
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              {item.href ? (
+                <Link
+                  href={item.href}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {item.label}
+                </Link>
+              ) : (
+                <span className="text-foreground font-medium">{item.label}</span>
+              )}
+            </li>
+          ))}
+        </ol>
+      </div>
+    </nav>
+  );
+}