I am using the astro-breadcrumbs package to generate breadcrumbs across my site. I have set linkTextFormat="capitalized", which works well for most cases, but I need certain words in the URL, like acronyms, to retain their full uppercase format.
In my MainLayout.astro file, I have implemented the breadcrumbs component like this:
<Breadcrumbs
linkTextFormat="capitalized"
ariaLabel="Site navigation"
truncated={true}
ellipsisAriaLabel="Show more breadcrumbs"
excludeCurrentPage={hideBreadcrumbs || false}
>
</Breadcrumbs>
This setup is included in the main layout to ensure breadcrumbs are rendered on all pages.
For example, when the URL is:
http://localhost:4322/pattern/fhir-explorer/
The breadcrumbs are rendered as: Home->Pattern->Fhir Explorer
However, I would like the output to preserve the full uppercase format for certain words, like: Home->Pattern->FHIR Explorer
Is there a way to modify the linkTextFormat or another approach to ensure that specific terms like "FHIR" or other acronyms retain their full uppercase format when rendering breadcrumbs?
Currently, as a workaround, I’m passing custom breadcrumb links from pages where such acronyms occur. For example:
const breadcrumbLinks = [
{ index: "last", text: "Last page!" },
{
"data-link": "home",
"aria-label": "Go to the home page",
index: "1", text: 'Regime',"aria-disabled": true ,
},
{
"data-link": "HIPAA",
"aria-label": "Go to the HIPAA page",
index: "1", text: "HIPAA","aria-disabled": true
},
];
Is there a cleaner or more scalable way to achieve this, maybe by extending linkTextFormat or intercepting the label generation logic to preserve certain terms like "FHIR", "HIPAA", "SOC", etc., in uppercase?
Any advice or guidance on how to achieve this would be greatly appreciated!
I am using the astro-breadcrumbs package to generate breadcrumbs across my site. I have set linkTextFormat="capitalized", which works well for most cases, but I need certain words in the URL, like acronyms, to retain their full uppercase format.
In my MainLayout.astro file, I have implemented the breadcrumbs component like this:
This setup is included in the main layout to ensure breadcrumbs are rendered on all pages.
For example, when the URL is:
http://localhost:4322/pattern/fhir-explorer/
The breadcrumbs are rendered as: Home->Pattern->Fhir Explorer
However, I would like the output to preserve the full uppercase format for certain words, like: Home->Pattern->FHIR Explorer
Is there a way to modify the linkTextFormat or another approach to ensure that specific terms like "FHIR" or other acronyms retain their full uppercase format when rendering breadcrumbs?
Currently, as a workaround, I’m passing custom breadcrumb links from pages where such acronyms occur. For example:
Is there a cleaner or more scalable way to achieve this, maybe by extending linkTextFormat or intercepting the label generation logic to preserve certain terms like "FHIR", "HIPAA", "SOC", etc., in uppercase?
Any advice or guidance on how to achieve this would be greatly appreciated!