Thank you so much @nolo – I’ve updated this component with your code (and added some more code bits) to enable some additional functionality:
Hello! This component is great!
There’s just one detail that maybe you know how to fix.
The back button disappears when you scroll down (please see attached video)…is it possible to have the back button fixed/floating at the top of the screen so that it remains visible even when scrolling?
Context: the community is embedded (webview) in our mobile app.
Thank you @cristo for that great suggestion which is now included as a setting:
Thank you @denvergeeks ! The button is now sticky.
But, as you can see in the attached video, the button is not taking me back to the same point in the scroll on the home screen.
Yes because it’s a Home button, not a Back button!
My bad! I thought it was a back button because of the arrow.
@denvergeeks thank you for clarifying! Do you happen to know of a component that offers a back button?
No I am not aware of any existing TC that is (or includes) a proper Back button. There might well be something existing that includes one.
But I do recognize the utility of having a Back button within the site navigation, so I’ll work out a separate TC that provides that.
Maybe you could look to see if there is any existing theme or theme component that happens to include one. Finding that might speed up my process.
Awesome! I’ll research and let you know my findings.
Thank you!
@denvergeeks I found a topic that might be useful:
I haven’t found yet any existing theme or component that includes a back button.
Unfortunately, I’m having this same issue on an iPhone 16 Pro Max.
Yes, I can confirm that it appeared after an update. I am having this issue on my Android phone.
Thanks @Aaron_Walsh and @cristo for reporting! Please update now and let me know your results!
I can confirm the issue on the Android side. It has now been fixed and removed.
Fixed on my iPhone!
@denvergeeks Awesome! The back button is working on Android.
Thanks a lot!
I noticed that there’s no way of deciding where the breadcrumbs go, which would be great. For example I’m using the Category Banners and I would like the breadcrumbs to be above that.
It gets a bit lost when it’s below.
Any chance of changing this?
Thanks
I just noticed something that could be fixed (or at least having the option to toggle that on and off). I don’t think the last / needs to be there
So it would be just Home / General Discussion instead of Home / General Discussion /
EDIT:
I just used CSS to do that, but I believe it could be the default. In case someone wants that:
/* Remove separator (::after content) from the last breadcrumb item */
.breadcrumbs li:last-child::after {
content: none;
}
This is a minor tweak, but it looks better to me. Increase the margin-bottom to 1rem to give it more space to “breathe”, but it also centers it when there’s a banner (if we have to stick to that position on the page). Look at my previous image (the default 0.5rem) versus using 1rem:
Final result after all the CSS tweaks I made:
CSS:
/* breadcrumbs - remove background and increase margin-bottom */
.breadcrumbs {
background-color: transparent !important;
margin-bottom: 1rem;
}
/* breadcrumbs - hide back arrow from Home link */
.breadcrumbs__title .d-icon {
display: none;
}
/* breadcrumbs - remove separator (::after content) from the last breadcrumb item */
.breadcrumbs li:last-child::after {
content: none;
}
Hi, I have a warning in my forum because upcoming changes to Discourse core:
[Admin Notice] One of your themes or plugins needs to be updated to support upcoming changes to Discourse core. (id:discourse.script-tag-discourse-plugin) Issue identified: “Breadcrumb Links”.
I’m using Discourse cloud, can I solve this or I have to wait the plugin update?
@nolo On GitHub I noticed that you’re one of the contributors to this component so I hope it’s ok to mention you here?
I’m sure more people are seeing this same message:
[Admin Notice] Theme 'Breadcrumb Links' contains code which needs updating. (id:discourse.script-tag-discourse-plugin) (learn more)
And the Learn More redirects to:
Any chances that the component gets updated?
Thanks!
I just opened a PR fixing this issue, hope the contributors can review it and merge it
Thank you for sharing this! It’s working without the warning message.
I am having another issue I mentioned here:
For that issue, I asked ChatGPT and it said (since I’m not a developer):
The issue likely stems from how you’re extracting the topicId from the URL:
const topicId = url.split('/')[2];
If your URL contains more complex patterns (like titles with spaces, special characters, or non-standard slugs), this simple split won’t reliably get the correct topic ID.
/t/3ple-2015-2019-title/12345 have the numeric topic ID at the end, but your code assumes the topic ID is always the 3rd segment./t/${topicId}.json) because you may be sending an invalid topic ID or slug, returning incorrect or default category info (like “General”).Use a more reliable way to extract the topic ID from the URL:
Discourse topic URLs often look like /t/{slug}/{id}, e.g.:
/t/3ple-2015-2019-title/12345
Here, 12345 is the topic ID.
const topicId = url.split('/')[2];
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1]; // last segment, expected to be numeric id
topicId is a number:if (!/^\d+$/.test(topicId)) {
console.error("Invalid topic ID extracted from URL:", topicId);
return; // stop execution
}
updateBreadcrumbs like this:if (url.includes('/t/')) {
const segments = url.split('/').filter(Boolean);
const topicId = segments[segments.length - 1];
if (!/^\d+$/.test(topicId)) {
console.error("Invalid topic ID extracted from URL:", topicId);
return;
}
// Then continue your AJAX calls with topicId
}
This way you always get the numeric topic ID regardless of complex or spaced titles in the URL, fixing the breadcrumb category and path lookup.
Would you be able to fix that?
Thanks in advance 