Skip to content

add mobile breadcrumb #4724

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
micsblank wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add mobile breadcrumb #4724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
17b567b
add mobile breadcrumb
micsblank Jun 3, 2026
6c15835
last breadcrumb text is white
micsblank Jun 3, 2026
a9569d1
breadcrumb edits
micsblank Jun 3, 2026
294c971
Enacting changes from Josh and Isaac
micsblank Jun 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 36 additions & 12 deletions app/components/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { ArrowLeft } from "lucide-react";
import { usePathname } from "next/navigation";
import React, { FC, useMemo } from "react";
import { tinaField } from "tinacms/dist/react";
Expand Down Expand Up @@ -47,7 +48,7 @@
}) => {
const pathname = usePathname();

const breadcrumbItems = useMemo(() => {
const { breadcrumbItems, mobileParent } = useMemo(() => {
const pathSegments = pathname
.split("/")
.filter((segment) => segment !== "");
Expand All @@ -70,7 +71,7 @@
<BreadcrumbLink
href="/"
className={
"text-xs text-gray-700 underline-offset-1 hover:text-sswRed"
"text-sm text-gray-700 underline-offset-1 hover:text-sswRed"
}
>
Home
Expand All @@ -87,17 +88,17 @@
items.push(
<BreadcrumbSeparator
key={`separator-${index}`}
className="text-xs text-gray-700"
className="text-sm text-gray-700"
>
{">"}
{"/"}
</BreadcrumbSeparator>
);

items.push(
<BreadcrumbItem key={`item-${index}`}>
{isLast ? (
<BreadcrumbPage
className={"text-xs text-gray-700 no-underline"}
className={"text-sm text-gray-700 no-underline"}
{...(seoSchema
? { "data-tina-field": tinaField(seoSchema, "title") }
: {})}
Expand All @@ -108,7 +109,7 @@
<BreadcrumbLink
href={href}
className={
"text-xs text-gray-700 underline-offset-1 hover:text-sswRed"
"text-sm text-gray-700 underline-offset-1 hover:text-sswRed"
}
>
{displayName}
Expand All @@ -118,14 +119,37 @@
);
});

return items;
let mobileParent: { label: string; href: string };
if (pathSegments.length >= 2) {
const parentIndex = pathSegments.length - 2;
mobileParent = {
label: getDisplayName(pathSegments[parentIndex]),
href: "/" + pathSegments.slice(0, parentIndex + 1).join("/"),
};
} else {
mobileParent = { label: "Home", href: "/" };
}

return { breadcrumbItems: items, mobileParent };
}, [pathname, path, title, seoSchema, additionalReplacements]);

return (
<Breadcrumb>
<BreadcrumbList className="gap-2 font-normal">
{breadcrumbItems}
</BreadcrumbList>
</Breadcrumb>
<>
<Breadcrumb className="hidden sm:block">
<BreadcrumbList className="gap-2 font-normal">
{breadcrumbItems}
</BreadcrumbList>
</Breadcrumb>
<nav className="sm:hidden" aria-label={`Back to ${mobileParent.label}`}>
<a
href={mobileParent.href}
className="unstyled inline-flex items-center gap-1 text-sm text-gray-700 no-underline hover:text-sswRed hover:no-underline"
aria-label={`Back to ${mobileParent.label}`}
>
<ArrowLeft className="h-[1em] w-[1em]" aria-hidden="true" />

Check failure on line 149 in app/components/breadcrumb.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Arbitrary value detected in 'w-[1em]'

Check failure on line 149 in app/components/breadcrumb.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Arbitrary value detected in 'h-[1em]'

Check warning on line 149 in app/components/breadcrumb.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Classnames 'h-[1em], w-[1em]' could be replaced by the 'size-[1em]' shorthand!
{mobileParent.label}
</a>
</nav>
</>
);
};
27 changes: 26 additions & 1 deletion components/blocks/breadcrumbs/breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import global from "@/content/global/index.json";
import { cn } from "@/lib/utils";
import { Consultingv2BlocksBreadcrumbs } from "@/tina/types";
import { ArrowLeft } from "lucide-react";
import { usePathname } from "next/navigation";
import React from "react";
import { tinaField } from "tinacms/dist/react";
Expand Down Expand Up @@ -103,10 +104,21 @@
// Index 0 is an empty string if the path starts with a slash
const links = getLinks(paths, data, data.finalBreadcrumb);

// Parent one level above the current page, for the collapsed mobile view
const segments = paths.filter((segment) => segment !== "");
const replacementMap = new Map(
global.breadcrumbReplacements.map((r) => [r.from, r.to])
);
const parent = segments[segments.length - 2];
const mobileParent =
segments.length >= 2
? { label: replacementMap.get(parent) ?? parent, href: `/${parent}` }
: { label: global.breadcrumbHomeRoute, href: "/" };
Comment on lines +113 to +116

@joshbermanssw joshbermanssw Jun 4, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This .find(...)?.to || rawSlug lookup is a bit convoluted, and it's a hand-written second copy of the same slug→label logic that lives in app/components/breadcrumb.tsx (getDisplayName). Consider a small Map instead, e.g. build it once:

const replacementMap = new Map(
  global.breadcrumbReplacements.map((r) => [r.from, r.to])
);
const parent = segments[segments.length - 2];
const label = replacementMap.get(parent) ?? parent;

Cleaner to read, and better still if the whole mobile back-link were extracted into one shared component so the two breadcrumb files can't drift (the href already differs between them — full path here vs. single segment).


return (
<V2ComponentWrapper data={data}>
<Container size="custom" padding="px-4 sm:px-8" className="pt-8 sm:pt-12">
<Breadcrumb className="text-gray-300">
<Breadcrumb className="hidden text-gray-300 sm:block">
<BreadcrumbList>
{links.map((link, index) => (
// react fragments don't appear in the dom
Expand All @@ -121,6 +133,19 @@
))}
</BreadcrumbList>
</Breadcrumb>
<nav
className="text-gray-300 sm:hidden"
aria-label={`Back to ${mobileParent.label}`}
>
<a
href={mobileParent.href}
className="unstyled inline-flex items-center gap-1 text-sm no-underline transition-colors hover:text-white hover:no-underline"
aria-label={`Back to ${mobileParent.label}`}
>
<ArrowLeft className="h-[1em] w-[1em]" aria-hidden="true" />

Check failure on line 145 in components/blocks/breadcrumbs/breadcrumbs.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Arbitrary value detected in 'w-[1em]'

Check failure on line 145 in components/blocks/breadcrumbs/breadcrumbs.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Arbitrary value detected in 'h-[1em]'

Check warning on line 145 in components/blocks/breadcrumbs/breadcrumbs.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Classnames 'h-[1em], w-[1em]' could be replaced by the 'size-[1em]' shorthand!
{mobileParent.label}
</a>
</nav>
</Container>
</V2ComponentWrapper>
);
Expand Down
3 changes: 2 additions & 1 deletion components/ui/breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,5 +114,6 @@
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
BreadcrumbSeparator

Check failure on line 117 in components/ui/breadcrumb.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Insert `,`
};

Check failure on line 119 in components/ui/breadcrumb.tsx

View workflow job for this annotation

GitHub Actions / lint-code 

Delete `⏎`
Loading