fix: convert incorrect breadcrumb links to opaque spans

[dario-piotrowicz]

Description

It's pretty minor but I figured I could just open a PR to fix this small UI bug I noticed 🙂

The fact is that in pages with breadcrumbs at the bottom of the screen most of the time the first breadcrumbs link is not really a valid link and clicking it results in a hard reload of the app:

See:

My changes here make breadcrumb items with falsy hrefs simple text elements instead of a links, for good measure they are also dimmed to make it more evident that they are not clickable

Validation

I manually validated this check with npm run dev and also npm run build && npm run start

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run format to ensure the code follows the style guide.
• I have run npm run test to check if all tests are passing.
• I have run npx turbo build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Apr 7, 2025 0:31am

[Copilot]

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

[avivkeller]

Can you add a linkless story?

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 99	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 96	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Title	Lines	Statements	Branches	Functions
@node-core/ui-components		95.83% (161/168)	77.86% (102/131)	88.57% (31/35)
@nodejs/website		84.73% (494/583)	76.03% (165/217)	86.99% (107/123)

Title	Tests	Skipped	Failures	Errors	Time
@node-core/ui-components	24	0 💤	0 ❌	0 🔥	5.178s ⏱️
@nodejs/website	156	0 💤	0 ❌	0 🔥	6.564s ⏱️

[dario-piotrowicz]

Can you add a linkless story?

Thanks for the suggestion 🙂

Sure, done 🙂👍

[dario-piotrowicz]

mh... actually I might need to amend something, the last item should be styled as active even if it doesn't have an href right? 🤔

The About Node.js breadcrumb item should be styled as active, right? 🤔

[dario-piotrowicz]

mh... actually I might need to amend something, the last item should be styled as active even if it doesn't have an href right? 🤔

addressed 👍 614899a (the solution is a bit ugly but I am not sure if much better can be done here 🤔)

[ovflowd]

This is weird. All breadcrumb entries should be links. The fact that About Node.js is causing a hard refresh is a bug.

We shouldn't do this; we should investigate why the link wasn't a link to begin with.

[dario-piotrowicz]

why the link wasn't a link to begin with.

It's because of the site navigation structure, for example see:

there is actually no getting started page (see: https://nodejs.org/en/learn/getting-started/)

so if the breadcrumb for getting started were a link what page would it point to?