# How to add breadcrumb?
**URL:** https://meta.discourse.org/t/how-to-add-breadcrumb/223012
**Category:** Development
**Created:** [April 3, 2022, 7:17pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012 "2022-04-03T19:17:28Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [April 3, 2022, 7:17pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/1 "2022-04-03T19:17:28Z")
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.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [April 3, 2022, 9:21pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/2 "2022-04-03T21:21:37Z")
Isn’t that a kind of breadcrumb? What are you asking, more specifically? Do you have a mockup maybe?
---
### Author:  [@Decorbuz](https://meta.discourse.org/u/Decorbuz)
#### Post date: [April 3, 2022, 10:12pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/3 "2022-04-03T22:12:50Z")
This is probably what @asugar had in mind.
---
### Author:  [@maiki](https://meta.discourse.org/u/maiki)
#### Post date: [April 3, 2022, 11:53pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/4 "2022-04-03T23:53:57Z")
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.
> [@asugar](#):
>
> I want to add it just below Top Navigation.
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:
> [@asugar](#):
>
> Home / Tech Talks / WordPress
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 [https://www.dokuwiki.org/dokuwiki](https://www.dokuwiki.org/dokuwiki), click a few random links and check the header)
@asugar, which type of breadcrumbs are you referring? 🙂
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [April 4, 2022, 5:25am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/5 "2022-04-04T05:25:21Z")
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.
---
### Author:  [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [April 4, 2022, 8:30am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/6 "2022-04-04T08:30:02Z")
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?
---
### Author:  [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [April 4, 2022, 10:36am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/7 "2022-04-04T10:36:05Z")
> [@asugar](#):
>
> Is it really impossible to add simple navigation as I want?
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](https://meta.discourse.org/t/custom-top-navigation-links/87225) and [Custom Header Links - theme - Discourse Meta](https://meta.discourse.org/t/custom-header-links/90588)
---
### Author:  [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [April 4, 2022, 11:01am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/8 "2022-04-04T11:01:09Z")
That’s navigation/menu and I already have that. Breadcrumb is not navigation/menu. I want breadcrumb.
---
### Author:  [@osioke](https://meta.discourse.org/u/osioke)
#### Post date: [April 4, 2022, 11:04am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/9 "2022-04-04T11:04:28Z")
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.
---
### Author:  [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [April 4, 2022, 11:53am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/10 "2022-04-04T11:53:45Z")
That is a typical breadcrumb found on any forum software, above is from vBulletin. This is what I was talking about.
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [April 4, 2022, 12:10pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/11 "2022-04-04T12:10:15Z")
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… 🙂
---
### Author:  [@asugar](https://meta.discourse.org/u/asugar)
#### Post date: [April 4, 2022, 6:06pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/12 "2022-04-04T18:06:22Z")
> [@Jonathan5](#):
>
> 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.
I wish there was already a plugin out there, does anyone know it?
---
### Author:  [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [March 3, 2023, 7:58pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/13 "2023-03-03T19:58:57Z")
Has anyone been able to solve the problem with displaying classic breadcrumbs on the page?
---
### Author:  [@mwellman](https://meta.discourse.org/u/mwellman)
#### Post date: [August 10, 2023, 4:16pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/14 "2023-08-10T16:16:18Z")
May not be the best way to do it but this worked for us:
header.html or separate plugin:
```js
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(`
HOME
Community
`);
} else {
$("#breadcrumbsContainer").append(`
HOME
Community
`);
}
};
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(`
${categoryTitle}
`);
}
},
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(`
${categoryTitle}
${topicTitle}
`);
}
},
error: function(error) {
console.error("Error fetching category details for topic", error);
}
});
}
},
error: function(error) {
console.error("Error fetching topic details", error);
}
});
}
}
```
SCSS:
```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:
```html
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 10, 2023, 4:26pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/15 "2023-08-10T16:26:33Z")
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.
---
### Author:  [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 10, 2023, 6:49pm UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/16 "2023-08-10T18:49:41Z")
Very good. I hope that after a few upgrades it will get into the core
---
### Author:  [@Oohyeah88](https://meta.discourse.org/u/Oohyeah88)
#### Post date: [September 15, 2023, 7:15am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/17 "2023-09-15T07:15:43Z")
I would love to have this!
Is there an option for this, or do I need to get programmers involved?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 15, 2023, 7:48am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/19 "2023-09-15T07:48:32Z")
If you want a reliable component, it needs developer’s work. 🙂
I wouldn’t recommend using the one shared on this topic.
---
### Author:  [@Oohyeah88](https://meta.discourse.org/u/Oohyeah88)
#### Post date: [September 15, 2023, 8:58am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/20 "2023-09-15T08:58:55Z")
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!
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 15, 2023, 9:45am UTC](https://meta.discourse.org/t/how-to-add-breadcrumb/223012/21 "2023-09-15T09:45:01Z")
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.
[Next page](https://meta.discourse.org/t/how-to-add-breadcrumb/223012.md?page=2)