Category Groups

[Discourse]

	Summary	Category Groups allows you to assign categories to groups, which are then used to sort and collapse categories on the categories page.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-category-groups-component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, support, bug, ux, and feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

Important things to note:

• This theme component only works with the site setting desktop category page style set to boxes with subcategories (as it replaces that category page template).

• The category collapsing works using your browser’s local storage, so the collapsed state will not be remembered between different devices.

Settings

Name	Description
category groups	This is how the groups are configured. Format as: Group name: category-slug, extra-link-id, category-slug-2 (The category slug is the name of the category as it’s seen in URLs. Usually all lowercase with no spaces)
extra links	Extra links that can be mixed into category list. Add link ID in category_groups setting to render
show on mobile	Show the collapsible category box groups on mobile
show ungrouped	Display a group of categories that aren’t assigned to another group
fancy styling	Turn on additional styling (These are some custom styles added. They stray from our defaults, so if you’re working on your own theme you may want to disable this)
hide muted subcategories	When enabled, a non-muted parent category will not appear under the muted section if it has a muted subcategory

Theme Translations	Default
ungrouped_categories_title	Other

Hosted by us? Theme components are available to use on our Standard, Business and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T09:28:21Z

Check document

Perform check on document:

[awesomerobot (Kris)]

I’ve just merged a refactor of this component. Functionality should remain the same overall, with some bug fixes.

REFACTOR: update to glimmer, remove overrides, etc

Behind the scenes this uses some modernized Ember, and eliminates template overrides, which can be a little fragile as far as Discourse customizations go.

@Drew-ART

If i use the slug pr-and-social-media, the plugin will look for ‘pr’ ‘and’ ‘social’ ‘media’, and if it finds any of them it’ll add them to a category group.

This should be fixed now

@Drew-ART

After the update to 3.2. i find my pre-existing categories work fine but any new ones i add it has a bug with subcategories where the category groups i’ve set up are repeated inside the category with the new subcategory in all of them

This is fixed now, the groups will no longer apply to the subcategory layouts

@jrgong

It seems that in the <img> tag width and height parameters use a large value, not sure though where it’s pulled from.

I’ve updated this, so category logos should be much more normally sized now

[jenmck (jen)]

Is it possible to not show subcategories for a particular category? We have a category that’s organized in a particular way with nested subcategories and it’s causing the box to be quite large.

[Heliosurge (Dan DeMontmorency)]

Maybe try the Category Hider in theme-component

Category Hider Theme Component

Hi all, I’ve created a simple theme component. I hope this could be of use for some! Overview This is a theme component that allows you to hide specific categories from either the hamburger menu or category boxes. Why would you need this component? If your discourse website has a lot of categories and you would like to hide some from appearing in either the menu bar or on the main page, this component can be helpful. Screenshots Preview of Hambur…

[PeakProsperity (Aaron McKeon)]

Can you tell me if it’s possible to apply the category groupings to the sidebar? If not, I would like to put this in as a feature request. Thanks!

[gru (Ruslan)]

There is a problem on my website, subcategories hasn’t space between them.

[awesomerobot (Kris)]

Thanks for reporting it, an update should fix it now (fixed in UX: include gap for subcategories by awesomerobot · Pull Request #19 · discourse/discourse-category-groups-component · GitHub).

[awesomerobot (Kris)]

@PeakProsperity

Can you tell me if it’s possible to apply the category groupings to the sidebar?

It’s not possible, the sidebar would need a bigger change in Discourse to allow for this (request noted!)

[gru (Ruslan)]

Will be awesome if this grouping will be customizable by user, some people in our community wanted that.

Yeah, this needs a plugin, but a good idea I think

[MustardMan]

Any idea why the category width is so skinny? Is there a way to fix this?

[awesomerobot (Kris)]

is this in the Mint theme? I’ve just made a minor update that should fix it — there was a slight conflict between the CSS of that theme and this component

[MustardMan]

Yeah it was the mint, thank you

[Cameron_McNabb]

How do I prevent the boxes being outlined with the category colour? I’ve tried forking it, adding css, and also changing the <li style in the categories-groups.hbs

(Note that I am a dabbler, not a trained developer)

[awesomerobot (Kris)]

You can add a little CSS to your theme to remove the colorful borders:

.category-boxes .category-box {
  border-left: 2px solid var(--primary-low) !important;
}

or if you have the “fancy styling” setting turned on:

.custom-categories-groups .category-box {
    border: 2px solid var(--primary-low) !important;
}

[Cameron_McNabb]

Thanks Kris,

It appears I’m having a bigger problem. For some reason, whenever I try to update the Theme component, it doesn’t pick up the changes at all. So my css was good, it just wasn’t being loaded. Not something for this thread, I’ll have a search around to see if there is something dumb I’m doing

[MustardMan]

Would it be possible to have the fancy styling boxes with a latest section below the categories? In essence I want to do that same thing that the “Modern Categories + Group Boxes” component does in the Air Theme. You can select Categories with Latest for the desktop view and latest displays below the categories.

Im trying to edit my own version of the CSS but im no expert. Would this be an easy thing to do or might it be out of my skill set?