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.

[image] 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 and Custom Header Links - theme - Discourse Meta

That’s navigation/menu and I already have that. Breadcrumb is not navigation/menu. I want breadcrumb.

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.

[breadcrumb] That is a typical breadcrumb found on any forum software, above is from vBulletin. This is what I was talking about.

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… :slight_smile:

[image] 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?

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(` 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: #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:

For those who want to see what it looks like: [image] (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.

Very good. I hope that after a few upgrades it will get into the core

How to add breadcrumb?

Development

denvergeeks September 6, 2024, 8:20pm 26

Topic		Replies	Views
Breadcrumb Links Theme component	45	2689	July 28, 2026
Header Categories Navbar Theme component official , categories-navbar	38	5096	October 19, 2026
Nest subcategories under their parent categories in the sidebar UX sidebar	34	4476	October 5, 2024
Categories/Tags breadcrumb glitching on home page Bug	11	253	February 18, 2026
Display top menu in post display page Development	0	455	May 25, 2021

How to add breadcrumb?

Related topics