From 973c76a4c8f1f89b4aefde53efca5c2b7122b077 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 11 May 2026 11:58:49 -0700
Subject: [PATCH] feat(browse): add breadcrumb nav above recipe grid (closes
 #130)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renders domain › category › subcategory above the recipe grid whenever
a domain and category are active. Each ancestor crumb is a button that
navigates back up the hierarchy (selectDomain / selectCategory). The
leaf node is a plain span with aria-current="page". The nav has
aria-label="Browse location" for screen reader context.
---
 .../src/components/RecipeBrowserPanel.vue     | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/frontend/src/components/RecipeBrowserPanel.vue b/frontend/src/components/RecipeBrowserPanel.vue
index 22f5808..e327e6a 100644
--- a/frontend/src/components/RecipeBrowserPanel.vue
+++ b/frontend/src/components/RecipeBrowserPanel.vue
@@ -84,6 +84,25 @@
         </template>
       </div>
 
+      <!-- Browse breadcrumb — shows current position in domain > category > subcategory hierarchy -->
+      <nav v-if="activeDomain && activeCategory" class="browse-breadcrumb" aria-label="Browse location">
+        <button
+          class="crumb-btn"
+          @click="selectDomain(activeDomain)"
+          :aria-current="!activeCategory ? 'page' : undefined"
+        >{{ domains.find(d => d.id === activeDomain)?.label ?? activeDomain }}</button>
+        <span class="crumb-sep" aria-hidden="true">›</span>
+        <button
+          class="crumb-btn"
+          @click="selectCategory(activeCategory)"
+          :aria-current="!activeSubcategory ? 'page' : undefined"
+        >{{ activeCategory === '_all' ? 'All' : activeCategory }}</button>
+        <template v-if="activeSubcategory">
+          <span class="crumb-sep" aria-hidden="true">›</span>
+          <span class="crumb-current" aria-current="page">{{ activeSubcategory }}</span>
+        </template>
+      </nav>
+
       <!-- Recipe grid -->
       <template v-if="activeCategory">
         <div v-if="loadingRecipes" class="text-secondary text-sm">Loading recipes…</div>
@@ -869,4 +888,40 @@ async function submitTag() {
   font-size: 0.875rem;
   margin-left: 0.5rem;
 }
+
+/* ── Browse breadcrumb ───────────────────────────────────────────────────── */
+.browse-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-xs, 0.78rem);
+  color: var(--color-text-secondary);
+}
+
+.crumb-btn {
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: var(--color-primary);
+  font-size: inherit;
+  border-radius: var(--radius-sm);
+}
+
+.crumb-btn:hover {
+  text-decoration: underline;
+}
+
+.crumb-sep {
+  opacity: 0.5;
+  padding: 0 2px;
+}
+
+.crumb-current {
+  padding: 2px 4px;
+  color: var(--color-text);
+  font-weight: 500;
+}
 </style>