I’ve searched on this topic but can’t find any working solution.
How do I add a simple basic breadcrumb showing categories, sub categories.
E.g.
Home / Tech Talks / WordPress
I want to add it just below Top Navigation.
4 Likes
Isn’t that a kind of breadcrumb? What are you asking, more specifically? Do you have a mockup maybe?
3 Likes
Hi @asugar. 
Would you mind elaborating a bit on what you mean? We call the categories and tags navigational aid “breadcrumbs”; @Canapin highlights them in their screenshot.
Normally I’d mention showing a screenshot and marking when you’d like them, and then we would work back from there, but I have another observation, first:
I think that if you were to add that to each page, it would essentially show multiple identical navigation menus, and in close proximity to each other.
As an alternative, is there something we could do with the existing breadcrumb navigation to make it work for your site? 
Also worth clarifying the meaning of “breadcrumbs”. I’ve been in numerous conversations where two parties meant different things:
- Hierarchical breadcrumbs as reflection of site structure (categories/sub-categories/tags, or books/title/chapter)
- Tracking breadcrumbs as history of visited pages (my favorite example is dokuwiki [DokuWiki], click a few random links and check the header)
@asugar, which type of breadcrumbs are you referring?
2 Likes
I should not guess what @asugar hopes to get, but perhaps similar than all other webpages — and WordPress mostly uses: navigational breadcrump builded using categories.
But Discourse has only two level deep construction so it can be only home - category - subcategory (sure, there could be page number too, but that is useless and I reckon almost impossible to build).
So, a breadcrumb doesn’t give anything else but eating space.
1 Like
Hello All. @Jagster is right in nailing it down. I wanted links to categories and sub categories. Like
Home - Category - Sub category - Sub sub category - …
I can see the existing navigation in discourse but it is not click and go to category/sub categories. On click it shows drop down.
Is it really impossible to add simple navigation as I want?
1 Like
It is possible, what everyone was trying to say is that there may be an alternative solution different from what you are asking, and they were wondering if you’d be interested in that. That said, it is possible but not out of the box. You’d have to design or create something custom for it. Examples, where something similar has been created, are:
Custom top navigation links - theme - Discourse Meta and Custom Header Links - theme - Discourse Meta
1 Like
That’s navigation/menu and I already have that. Breadcrumb is not navigation/menu. I want breadcrumb.
1 Like
I understand, that is why I used the word “similar”, they are similar in the sense that implementation or development is similar, not exactly the same or alike or even close to each other, but similar or should I say comparable.
I shared that or mentioned they were similar because I felt it could be helpful to see that something similar technically is possible in Discourse.
Seeing as it has been established that this is currently not possible in Discourse without something custom, you may need to create a #marketplace topic for it.
That is a typical breadcrumb found on any forum software, above is from vBulletin. This is what I was talking about.
2 Likes
The menu effectively is a breadcrumb (as in it shows category and subcategory, on category and subcategory pages) so I reckon you could change it from using dropdown menus to using plain old hyperlinks to the current category or subcategory. I bet anyone who knows how to write a plugin could do that.
The top of topic pages, when you scroll down, already show the category and subcategory (and tags) so maybe you’re happy with that already. I imagine a plugin author could move them to a different part of the screen for you.
If you pay for this and let it be freely available I might use it…
3 Likes
I wish there was already a plugin out there, does anyone know it?
2 Likes
Has anyone been able to solve the problem with displaying classic breadcrumbs on the page?
May not be the best way to do it but this worked for us:
header.html or separate plugin:
api.onPageChange((url) => {
updateBreadcrumbs(url);
});
const updateBreadcrumbs = (url) => {
// Helper function to reset the breadcrumbs container
const resetBreadcrumbs = () => {
$("#breadcrumbsContainer").empty();
// If on the homepage
if (url === '/') {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item active">
Community
</li>
`);
} else {
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="YOUR HOME"><i class="home">HOME</i></a>
</li>
<li class="breadcrumb-item">
<a href="/">Community</a>
</li>
`);
}
};
resetBreadcrumbs();
if (url.includes('/c/')) {
// If on a category page
const categorySlugOrId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/c/${categorySlugOrId}/show.json`,
success: function(response) {
if (response && response.category && response.category.name) {
const categoryTitle = response.category.name;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item active">
${categoryTitle}
</li>
`);
}
},
error: function(error) {
console.error("Error fetching category details", error);
}
});
} else if (url.includes('/t/')) {
// If on a topic page
const topicId = url.split('/')[2];
$.ajax({
type: "GET",
url: `/t/${topicId}.json`,
success: function(response) {
if (response && response.title) {
const topicTitle = response.title;
const categoryId = response.category_id;
// Now, fetch the category name using the category ID
$.ajax({
type: "GET",
url: `/c/${categoryId}/show.json`,
success: function(categoryResponse) {
if (categoryResponse && categoryResponse.category) {
const categoryTitle = categoryResponse.category.name;
const categoryURL = `/c/${categoryResponse.category.slug}`;
$("#breadcrumbsContainer").append(`
<li class="breadcrumb-item">
<a href="${categoryURL}">${categoryTitle}</a>
</li>
<li class="breadcrumb-item active">
${topicTitle}
</li>
`);
}
},
error: function(error) {
console.error("Error fetching category details for topic", error);
}
});
}
},
error: function(error) {
console.error("Error fetching topic details", error);
}
});
}
}
SCSS:
#breadcrumbsContainer {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 0;
list-style: none;
background-color: #FFFFFF;
border-radius: 0.25rem;
.breadcrumb-item {
display: flex;
align-items: center;
padding-left: 0;
& + .breadcrumb-item::before {
content: ">";
display: inline-block;
padding: 0 0.5rem;
color: #6c757d;
}
.home {
position: relative;
padding-left: 2.3rem;
font-size: 0;
visibility: hidden;
&::before {
content: "";
position: absolute;
display: block;
background-image: url('HOME SVG');;
background-repeat: no-repeat;
height: 24px;
width: 32px;
top: -20px;
visibility: visible;
}
&:hover {
&::before {
background-image: url('HOME HOVER SVG');;
}
}
}
a {
text-decoration: none;
color: #006BB4;
&:hover {
text-decoration: underline;
color: #0056b3;
}
}
&.active {
color: #6c757d;
}
}
}
In our after_header.html template:
<div id="breadcrumbsContainer"></div>
2 Likes
For those who want to see what it looks like:
(HOME to be replaced by an SVG by default, I tweaked the CSS)
Some parts of the breadcrumb are slowly generated after an ajax query.
Also, when we open a topic, the content is not scrolled on top by default.
3 Likes
Very good. I hope that after a few upgrades it will get into the core
I would love to have this!
Is there an option for this, or do I need to get programmers involved?
If you want a reliable component, it needs developer’s work.
I wouldn’t recommend using the one shared on this topic.
Thank you for your reply!
I will engage a dev to help on this, but could you kindly tell me the main issue(s) with that code?
Much appreciated!
I’m not a dev and if someone knows Discourse’s components better than I do, that would bring better answers than mine
2 two main points I see:
-
The AJAX calls to return data are very, very unoptimized. I’m pretty sure you can do such a component without making any request like this. They make the whole thing sluggish and make the breadcrumb populate with a delay.
-
The component almost doesn’t use Discourse JS API, which can probably return the data we need, and decorate/insert a template the right way instead of manually injecting HTML code in the DOM.
3 Likes