From f73bdc2410d33c8c6370ccf24993709a0641dab9 Mon Sep 17 00:00:00 2001
From: Limon Monte <6059356+limonte@users.noreply.github.com>
Date: Wed, 5 Aug 2026 14:49:53 +0300
Subject: [PATCH] feat: show a breadcrumb trail on recipe pages

Google prefers BreadcrumbList markup to match a visible trail. #265 added
the markup; recipe pages only had a "Back to Recipe Gallery" link, which
is not a trail and gave no route to the homepage.

- Nav renders <nav aria-label="Breadcrumb"> with SweetAlert2 / Recipe
  Gallery. The current page is the <h1> below, so it is not repeated.
- showBackToRecipeGalleryLink renamed to showBreadcrumbs (2 call sites).
  The gallery index and 404 still pass false, so their layout is
  unchanged.
- the centring offset moves from a bare `a` selector onto .breadcrumbs:
  with more than one link in the trail, the old rule would have applied
  to each of them.
- IconArrowLeft is deleted, now unused: the trail supersedes the
  back-arrow link it was added for.

Also improves internal linking, which #256 flagged: every recipe page
now links to the homepage as well as the gallery.

Part of #255 and #256

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 recipe-gallery/index.tsx   |  2 +-
 src/404.tsx                |  2 +-
 src/components/Nav.tsx     | 21 ++++++++++++++-------
 src/components/UiIcons.tsx |  9 ---------
 styles/styles.scss         | 18 +++++++++++++-----
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/recipe-gallery/index.tsx b/recipe-gallery/index.tsx
index 5a3e3dea..4366332e 100644
--- a/recipe-gallery/index.tsx
+++ b/recipe-gallery/index.tsx
@@ -4,7 +4,7 @@ import { renderRecipe } from '../src/utils'
 function Recipe() {
   return (
     <>
-      <Nav recipeGallery showBackToRecipeGalleryLink={false} />
+      <Nav recipeGallery showBreadcrumbs={false} />
       <h1>Recipe Gallery</h1>
       <p className="center">
         A collection of easy-to-digest code examples for specific tasks in about 30 lines of code or less.
diff --git a/src/404.tsx b/src/404.tsx
index ab0e283c..f4c60e14 100644
--- a/src/404.tsx
+++ b/src/404.tsx
@@ -5,7 +5,7 @@ function NotFound() {
   return (
     <>
       {/* recipeGallery renders the top nav with the search box; there is no gallery to go back to */}
-      <Nav recipeGallery showBackToRecipeGalleryLink={false} />
+      <Nav recipeGallery showBreadcrumbs={false} />
 
       <h1>Page not found</h1>
 
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 44b820b2..f225304b 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -2,16 +2,16 @@ import Swal from 'sweetalert2'
 import { showSidebar } from '../utils'
 import { DocSearch } from './DocSearch'
 import { ThemeSelector } from '../utils/themableSwal'
-import { IconArrowLeft, IconBars } from './UiIcons'
+import { IconBars } from './UiIcons'
 
 export const sidebarUrl = 'https://github.com/sweetalert2/sweetalert2.github.io/blob/main/src/utils/sidebar.tsx'
 
 export function Nav({
   recipeGallery = false,
-  showBackToRecipeGalleryLink = true,
+  showBreadcrumbs = true,
 }: {
   recipeGallery?: boolean
-  showBackToRecipeGalleryLink?: boolean
+  showBreadcrumbs?: boolean
 }) {
   return (
     <>
@@ -23,10 +23,17 @@ export function Nav({
       {recipeGallery ? (
         <>
           <div className="recipe-gallery-top-nav">
-            {showBackToRecipeGalleryLink ? (
-              <a href="/recipe-gallery/">
-                <IconArrowLeft /> Back to Recipe Gallery
-              </a>
+            {showBreadcrumbs ? (
+              // Mirrors the BreadcrumbList JSON-LD the generator emits: Google
+              // prefers breadcrumb markup to match a visible trail. The current
+              // page is the <h1> below, so it is not repeated here.
+              <nav className="breadcrumbs" aria-label="Breadcrumb">
+                <a href="/">SweetAlert2</a>
+                <span className="separator" aria-hidden="true">
+                  /
+                </span>
+                <a href="/recipe-gallery/">Recipe Gallery</a>
+              </nav>
             ) : null}
             <DocSearch />
           </div>
diff --git a/src/components/UiIcons.tsx b/src/components/UiIcons.tsx
index 0f47d2de..2db49a04 100644
--- a/src/components/UiIcons.tsx
+++ b/src/components/UiIcons.tsx
@@ -30,15 +30,6 @@ export function IconBars() {
   )
 }
 
-export function IconArrowLeft() {
-  return (
-    <svg {...decorative} className="ui-icon" viewBox="0 0 24 24" {...stroke}>
-      <path d="M19 12H5" />
-      <path d="m12 19-7-7 7-7" />
-    </svg>
-  )
-}
-
 export function IconExternalLink() {
   return (
     <svg {...decorative} className="ui-icon" viewBox="0 0 24 24" {...stroke}>
diff --git a/styles/styles.scss b/styles/styles.scss
index 279d5d2c..9da23a66 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -903,16 +903,24 @@ $bouncing-logo-min-height: 35%;
   align-items: center;
   justify-content: center;
 
-  @media all and (width > 768px) {
-    a {
+  // The offset belongs to the trail as a whole, not to each link inside it,
+  // so it stays on .breadcrumbs rather than on a bare `a` selector.
+  .breadcrumbs {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+
+    @media all and (width > 768px) {
       margin-right: 20em;
     }
-  }
 
-  @media all and (width <= 768px) {
-    a {
+    @media all and (width <= 768px) {
       margin-top: 1em;
     }
+
+    .separator {
+      color: $chateaugray;
+    }
   }
 
   #docsearch {