Hi community ![]()
Does anyone happen to know if there’s an option to change dropdown names inside a particular category?
I’d love to customize ‘all’ and ‘all tags’ parts:
The discussion revolves around customizing dropdown names in Discourse. Initially, Helga_Razinkova asked if it’s possible to change dropdown names within a particular category. merefield suggested that most text can be customized, but Canapin clarified that these changes would be global, not specific to categories.
Later, Don created a theme component to achieve this customization, allowing users to change dropdown titles for categories and tags. His solution involves adding settings for category and tag names, which can be customized using the component.
The community praised Don for his work, with Lilly expressing amazement and Canapin awarding him the “Front-End Medal of Distinction.”
joffreyjaffeux then offered an alternative solution using JavaScript, modifying the SelectKit to replace content and providing documentation links for further customization. Helga_Razinkova thanked both Don and joffreyjaffeux for their help, acknowledging their awesomeness.
But it won’t change for specific categories only.
Is started working on a very hacky CSS solution, it’s not perfect… And I’m a bit reluctant to share something that hacky anyway. ![]()
Got it, thank you for your help! @merefield @Canapin
Oh sorry, scan read!
Yes, they are global.
Oh go on
![]()
I think it’s overly complex, especially when subcategories aren’t defined as such in the HTML code… I have a half-working thing, but I think it should be done the right way, and Discourse JS API might help with this. Unfortunately, I don’t know much about it.
Hello ![]()
I’ve made a theme component now to achieve this…
https://github.com/VaperinaDEV/category-breadcrumb-dropdown-title
It contains two settings to make it easier.
category name
First Place: category slug
Second Place: category dropdown title
tag name
First Place: category slug
Second Place: tag dropdown title
Which will looks like this.
Adding subcategory Tag title
I hope it helps ![]()
Edit: I fixed the dropdown width to align correctly to the custom text width. UX: fix the dropdown width to keep the custom content width · VaperinaDEV/category-breadcrumb-dropdown-title@faca71c · GitHub
wow, great work @Don - you amaze me
![]()
Hear ye!
![]()
From the depths of SCSS mysteries and the intricacies of front-end alchemy, Sir Don has arisen. Conquering functions, mastering loops, and decrypting lists, we proudly confer upon him the illustrious Front-End Medal of Distinction ![]()
.
And your component works without a single JS line…

Please tell me GPT4bot helped you write that ![]()
100% yes, I’m afraid.
Ok so this solution is impressive, but you can do this @Don:
api
.modifySelectKit("category-drop")
.replaceContent((component, content) => {
let newContent = [];
content.forEach((item) => {
if (
component.category?.slug === "general" &&
item.id === "all-categories"
) {
item.name = "jojo";
}
newContent.push(item);
});
return newContent;
});
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/select-kit/addon/mixins/plugin-api.js lists all the actions you can make:
Let me know if you have troubles using this. It should probably be better documented, but Im here if you have any question.
@Don @j.jaffeux you are absolutely awesome, guys!! ![]()