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

Merged
micsblank merged 8 commits into from
Jul 6, 2026
Merged

add mobile breadcrumb #4724

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 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
392f807
Merge branch 'main' into micaela-UI-breadcrumbs-fix
micsblank Jun 29, 2026
ef09e83
Fix pylinting error
micsblank Jun 29, 2026
4e03d0e
Merge branch 'main' into micaela-UI-breadcrumbs-fix
micsblank Jun 29, 2026
c34b8d3
Merge branch 'main' into micaela-UI-breadcrumbs-fix
micsblank Jun 29, 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 @@ import {
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 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
}) => {
const pathname = usePathname();

const breadcrumbItems = useMemo(() => {
const { breadcrumbItems, mobileParent } = useMemo(() => {
const pathSegments = pathname
.split("/")
.filter((segment) => segment !== "");
Expand All @@ -70,7 +71,7 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
<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 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
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 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
<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 @@ export const Breadcrumbs: FC<BreadcrumbsProps> = ({
);
});

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="size-3.5" aria-hidden="true" />
{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 { Container } from "@/components/util/container";
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 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
// 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 @@ export function Breadcrumbs({ data }: { data: Consultingv2BlocksBreadcrumbs }) {
))}
</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="size-3.5" aria-hidden="true" />
{mobileParent.label}
</a>
</nav>
</Container>
</V2ComponentWrapper>
);
Expand Down
Loading