feat: show a breadcrumb trail on recipe pages

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.

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>
 

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>

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}>

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 {