Last Breadcrumb Custom Text Option

[ashu-shukla]

Hi! 👋

Firstly, thanks for your work on this project! 🙂 Today I used patch-package to patch astro-breadcrumbs@2.3.1 for the project I'm working on.

I was having an issue where if the URL for example is products/category1/123, I wanted the breadcrumbs to be as follows with sentence case enabled:

Products > Category1 > Product Name

But by default, I get:

Products > Category1 > 123

So I only wanted to change the lastItem text, so I added variable lastText to fix such a scenario

Here is the small fix that solved my problem:

diff --git a/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro b/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro
index bc494bc..622e140 100644
--- a/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro
+++ b/node_modules/astro-breadcrumbs/src/Breadcrumbs.astro
@@ -13,6 +13,7 @@ export interface BreadcrumbsProps {
   ellipsisAriaLabel?: string;
   truncated?: boolean;
   linkTextFormat?: "lower" | "capitalized" | "sentence";
+  lastText?: string;
   customBaseUrl?: string;
   excludeCurrentPage?: boolean;
 }
@@ -32,6 +33,7 @@ const {
   ellipsisAriaLabel = "Show hidden navigation",
   truncated = false,
   linkTextFormat,
+  lastText,
   customBaseUrl,
   excludeCurrentPage = false,
 } = Astro.props as BreadcrumbsProps;
@@ -49,6 +51,7 @@ const parts = generateCrumbs({
   linkTextFormat,
   customBaseUrl,
   excludeCurrentPage,
+  lastText,
 });

 const isLastElement = (index: number, array: any[]) =>
diff --git a/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts b/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts
index 39384d2..0b97699 100644
--- a/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts
+++ b/node_modules/astro-breadcrumbs/src/lib/generateCrumbs.ts
@@ -9,6 +9,7 @@ type GenerateCrumbs = {
   linkTextFormat: BreadcrumbsProps["linkTextFormat"];
   customBaseUrl: BreadcrumbsProps["customBaseUrl"];
   excludeCurrentPage: BreadcrumbsProps["excludeCurrentPage"];
+  lastText: BreadcrumbsProps["lastText"];
 };

 export const generateCrumbs = ({
@@ -19,6 +20,7 @@ export const generateCrumbs = ({
   linkTextFormat,
   customBaseUrl,
   excludeCurrentPage,
+  lastText,
 }: GenerateCrumbs) => {
   /**
    * If crumbs are passed, use them.
@@ -113,5 +115,9 @@ export const generateCrumbs = ({
     parts.pop();
   }

+  if (lastText) {
+    parts[parts.length - 1].text = lastText;
+  }
+
   return parts;
 };

This issue body was partially generated by patch-package.

[ashu-shukla]

Hi, sorry for packing so much info😅. I noticed the help-wanted flag... do I raise a PR so it would be easier to see the changes? Or this is not needed?

[codeinfo]

Hi, i having the same problem, but i need replace text. so add replaceLinkTextArray use replaceLinkText solving the problem.

[felix-berlin]

With the latest beta release you can control every crumb attribute (incl. text).

If you like to modify the last crumb:

---
const customLastPart = [{ index: "last", text: "Last page!", "data-any-attribute": "any" }];
---
<Breadcrumbs
   customizeLinks={customLastPart}
   debug={true}>
</Breadcrumbs>

To modify any other part of your breadcrumbs, create an object for each.

---
const modifyParts = [
  {
    "data-link": "home",
    "aria-label": "Go to the home page",
    text: "Page 1",
  },
  {
    "data-link": "about",
    "aria-label": "Go to the about page",
    text: "Page 2",
  },
  { "is-last": true, text: "Last page!" },
  {
    "data-link": "contact",
    "aria-label": "Go to the contact page",
    text: "Page 3",
  },
];
---
<Breadcrumbs
   customizeLinks={modifyParts }
   debug={true}>
</Breadcrumbs>

[!TIP] use prop debug={true} to see merge changes

[felix-berlin]

Hi, sorry for packing so much info😅. I noticed the help-wanted flag... do I raise a PR so it would be easier to see the changes? Or this is not needed?

Hey, I've seen your PR, as well as the one from @codeinfo. I've decided to solve the whole thing another way.

Both of your requirements have finally brought me to the current approach in the beta release. Thanks for the PRs, I'll close both as soon as v3 is ready.

I hope you are happy with the solution.

[ashu-shukla]

Awesome! I loved working on this tho🥳