Skip to content

How to retain full uppercase words (Acronym) in breadcrumbs using Astro Breadcrumbs ? #537

@divya-binil

Description

@divya-binil

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!

Metadata

Metadata

Assignees

Labels

bugSomething isn't workinghelp wantedExtra attention is needed

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions